MVC как отобразить изображение массива байтов из модели

это сработало для меня

<img src="data:image;base64,@System.Convert.ToBase64String(Model.CategoryPicture.Content)" width="80" height="80"/>     

Я рекомендую что-то в этом роде, даже если изображение живет внутри вашей модели.

Я понимаю, что вы просите прямой способ доступа к нему прямо с точки зрения, и многие другие ответили на это и сказали вам, что не так с этим подходом, так что это просто еще один способ, который будет загружать изображение в асинхронном режиме для вас, и я думаю, что это лучший подход.

Пример Модели:

[Bind(Exclude = "ID")]
public class Item
{
    [Key]
    [ScaffoldColumn(false)]
    public int ID { get; set; }

    public String Name { get; set; }

    public byte[] InternalImage { get; set; } //Stored as byte array in the database.
}

образец Метод в контроллере:

public async Task<ActionResult> RenderImage(int id)
{
    Item item = await db.Items.FindAsync(id);

    byte[] photoBack = item.InternalImage;

    return File(photoBack, "image/png");
}

View

@model YourNameSpace.Models.Item

@{
    ViewBag.Title = "Details";
}

<h2>Details</h2>

<div>
<h4>Item</h4>
<hr />
<dl class="dl-horizontal">
    <img src="@Url.Action("RenderImage", new { id = Model.ID})" />
</dl>
<dl class="dl-horizontal">
    <dt>
        @Html.DisplayNameFor(model => model.Name)
    </dt>

    <dd>
        @Html.DisplayFor(model => model.Name)
    </dd>
</dl>
</div>

одним из способов является добавление нового класса в языке C# или HtmlExtensions класс

public static class HtmlExtensions
{
    public static MvcHtmlString Image(this HtmlHelper html, byte[] image)
    {
        var img = String.Format("data:image/jpg;base64,{0}", Convert.ToBase64String(image));
        return new MvcHtmlString("<img src='" + img + "' />");
    }
}

затем вы можете сделать это в любом вид

@Html.Image(Model.ImgBytes)

Если вы можете в base-64 кодирования байт, вы можете попробовать использовать результат в качестве источника изображения. В вашей модели вы можете добавить что-то вроде:

public string ImageSource
{
    get
    {
        string mimeType = /* Get mime type somehow (e.g. "image/png") */;
        string base64 = Convert.ToBase64String(yourImageBytes);
        return string.Format("data:{0};base64,{1}", mimeType, base64);
    }
}

а на ваш взгляд:

<img ... src="@Model.ImageSource" />

Если изображение не такое большое, и если есть хороший шанс, что вы будете часто повторно использовать изображение, и если у вас их не слишком много, и если изображения не являются секретными (то есть это не имеет большого значения, если один пользователь потенциально может видеть изображение другого человека)...

много "если" здесь, так что есть хороший шанс, что это плохая идея:

Вы можете хранить изображения в байт Cache на короткое время и сделать тег изображения, указывающий на метод действия, который в свою очередь читает из кэша и выплевывает свое изображение. Это позволит браузеру кэшировать изображение соответствующим образом.

// In your original controller action
HttpContext.Cache.Add("image-" + model.Id, model.ImageBytes, null,
    Cache.NoAbsoluteExpiration, TimeSpan.FromMinutes(1),
    CacheItemPriority.Normal, null);

// In your view:
<img src="@Url.Action("GetImage", "MyControllerName", new{fooId = Model.Id})">

// In your controller:
[OutputCache(VaryByParam = "fooId", Duration = 60)]
public ActionResult GetImage(int fooId) {
    // Make sure you check for null as appropriate, re-pull from DB, etc.
    return File((byte[])HttpContext.Cache["image-" + fooId], "image/gif");
}

это имеет дополнительное преимущество (или это костыль?) работы в старых браузерах, где встроенные изображения не работают в IE7 (или IE8, если они больше 32 КБ).

Это модифицированная версия ответа Маноджа, которую я использую в проекте. Просто обновлено, чтобы взять класс, атрибуты html и использовать TagBuilder.

    public static IHtmlString Image(this HtmlHelper helper, byte[] image, string imgclass, 
                                     object htmlAttributes = null)
    {
        var builder = new TagBuilder("img");
        builder.MergeAttribute("class", imgclass);
        builder.MergeAttributes(new RouteValueDictionary(htmlAttributes));

        var imageString = image != null ? Convert.ToBase64String(image) : "";
        var img = string.Format("data:image/jpg;base64,{0}", imageString);
        builder.MergeAttribute("src", img);

        return MvcHtmlString.Create(builder.ToString(TagRenderMode.SelfClosing));
    }

который может быть использован следующим образом:

    @Html.Image(Model.Image, "img-cls", new { width="200", height="200" })

нужно иметь байт[] в вашей БД.

Мой байт[] находится в моем лице объекта:

public class Person
{
    public byte[] Image { get; set; }
}

Вам нужно преобразовать ваш байт[] в строку. Итак, у меня в контроллере:

String img = Convert.ToBase64String(person.Image);

Далее, по моему .cshtml файл, моя модель-это модель представления. Это то, что у меня есть в:

 public String Image { get; set; }

Я использую его вот так в моем .cshtml файл:

<img src="@String.Format("data:image/jpg;base64,{0}", Model.Image)" />

"сведения:изображения/изображения расширение файла; base64, {0}, изображение строки"

Я хочу, чтобы это кому-то поможет !

Если вы хотите представить изображение, добавьте метод в качестве вспомогательного класса или в саму модель и разрешите методу преобразовать изображение массива байтов в формат изображения, такой как PNG или JPG, а затем преобразовать в строку Base64. Как только вы это сделаете, свяжите значение base64 в своем представлении в формате

"сведения:изображения/[расширение типа файла изображения]; base64,[ваша строка base64 идет сюда]"

выше назначенной img тега src атрибут.

единственная проблема, с которой я сталкиваюсь, - это слишком длинная строка base64. Поэтому я бы не рекомендовал его для нескольких моделей, отображаемых в представлении.

Я создал вспомогательный метод, основанный на ответ ниже, и я очень рад, что этот помощник может помочь как можно больше.

модель:

 public class Images
 {
    [Key]
    public int ImagesId { get; set; }
    [DisplayName("Image")]
    public Byte[] Pic1 { get; set; }
  }

помощник:

public static IHtmlString GetBytes<TModel, TValue>(this HtmlHelper<TModel> helper, System.Linq.Expressions.Expression<Func<TModel, TValue>> expression, byte[] array, string Id)
    {
        TagBuilder tb = new TagBuilder("img");
        tb.MergeAttribute("id", Id);
        var base64 = Convert.ToBase64String(array);
        var imgSrc = String.Format("data:image/gif;base64,{0}", base64);
        tb.MergeAttribute("src", imgSrc);
        return MvcHtmlString.Create(tb.ToString(TagRenderMode.SelfClosing));
    }

представление получает объект: ICollection, поэтому вам нужно использовать его в представлении в инструкции foreach:

 @foreach (var item in Model)
  @Html.GetBytes(itemP1 => item.Pic1, item.Graphics, "Idtag")
}