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

У меня есть модель с файлом изображения байтового массива, который я хочу показать на странице.

Как я могу это сделать, не возвращаясь в базу данных?

Все решения, которые я вижу, используют ActionResult, чтобы вернуться к базе данных, чтобы получить изображение, но у меня уже есть изображение на модели …

Что-то вроде этого может работать …

@{ var base64 = Convert.ToBase64String(Model.ByteArray); var imgSrc = String.Format("data:image/gif;base64,{0}", base64); }  

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

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

  

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

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

Модель образца:

 [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. } 

Метод образца в controllerе:

 public async Task RenderImage(int id) { Item item = await db.Items.FindAsync(id); byte[] photoBack = item.InternalImage; return File(photoBack, "image/png"); } 

Посмотреть

 @model YourNameSpace.Models.Item @{ ViewBag.Title = "Details"; } 

Details

Item


@Html.DisplayNameFor(model => model.Name)
@Html.DisplayFor(model => model.Name)

Один из способов – добавить это в новый class c # или class 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(""); } } 

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

 @Html.Image(Model.ImgBytes) 

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

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

И, на ваш взгляд,

  

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

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

Вы можете хранить байты изображения в 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:  // 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 КБ).

Это модифицированная версия ответа Маноя, который я использую в проекте. Просто обновлен, чтобы взять атрибуты classа, 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" }) 

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

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

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

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

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

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

  public String Image { get; set; } 

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

  

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

Хотелось бы, чтобы это помогло кому-то!

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

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

Вышеупомянутый атрибут src тега img имеет атрибут.

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

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

С моделью:

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

Помощник:

 public static IHtmlString GetBytes(this HtmlHelper helper, System.Linq.Expressions.Expression> 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") } 
  • EditorTemplate для DropDownList
  • Как редактировать несколько моделей в одном представлении Razor
  • Локальный хост не работает в chrome и firefox
  • Как визуализировать JavaScript в разделе MasterLayout с частичного просмотра?
  • Html.Raw () в представлении ASP.NET MVC Razor
  • ASP.Net MVC - ресурс Не удается найти ошибку
  • Razor actionlink автогенерирует? Length = 7 в URL?
  • MVC Razor рассматривает вложенную модель foreach
  • asp.net MVC3 razor: отображение actionlink на основе роли пользователя
  • Динамическая модель MVC Razor, «объект» не содержит определения для «PropertyName»,
  • Различия между Html.TextboxFor и Html.EditorFor в MVC и Razor
  • Давайте будем гением компьютера.