MVC Como exibir uma imagem de matriz de bytes do modelo

Eu tenho um modelo com um arquivo de imagem de matriz de bytes que eu quero mostrar na página.

Como posso fazer isso sem voltar ao database?

Todas as soluções que vejo usam um ActionResult para voltar ao database para recuperar a imagem, mas eu já tenho a imagem no modelo …

Algo assim pode funcionar …

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

Como mencionado nos comentários abaixo, por favor use o acima armado com o conhecimento de que, embora isso possa responder a sua pergunta, pode não resolver o seu problema . Dependendo do seu problema, esta pode ser a solução, mas eu não descartaria completamente o access ao database duas vezes.

Isso funcionou para mim

  

Eu recomendo algo ao longo destas linhas, mesmo que a imagem viva dentro do seu modelo.

Percebo que você está pedindo uma maneira direta de acessá-lo desde o ponto de vista e muitos outros responderam isso e lhe disseram o que há de errado com essa abordagem, então esta é apenas uma outra maneira de carregar a imagem de forma assíncrona para você e eu acho que é uma abordagem melhor.

Modelo de amostra:

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

Método de Amostra no Controlador:

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

Visão

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

Details

Item


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

Uma maneira é adicionar isso a uma nova class c # ou 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(""); } } 

então você pode fazer isso em qualquer visão

 @Html.Image(Model.ImgBytes) 

Se você puder codificar com base em 64 seus bytes, você pode tentar usar o resultado como sua fonte de imagem. Em seu modelo, você pode adicionar algo como:

 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); } } 

E na sua opinião:

  

Se a imagem não é tão grande, e se há uma boa chance de você estar reutilizando a imagem com freqüência, e se você não tem muitos deles, e se as imagens não são secretas (o que significa que não é grande lidar se um usuário puder ver a imagem de outra pessoa) …

Muitos “se” estão aqui, então há uma boa chance de que isso seja uma má ideia:

Você pode armazenar os bytes da imagem no Cache por um curto período de tempo e fazer com que uma tag de imagem aponte para um método de ação, que, por sua vez, lê o cache e cria sua imagem. Isso permitirá que o navegador armazene a imagem apropriadamente.

 // 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"); } 

Isso tem o benefício adicional (ou é uma muleta?) De trabalhar em navegadores mais antigos, onde as imagens embutidas não funcionam no IE7 (ou no IE8, se forem maiores que 32kB).

Esta é uma versão modificada da resposta do Manoj que eu uso em um projeto. Apenas atualizado para ter uma class, atributos HTML e usar o 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)); } 

Qual pode ser usado então como segue:

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

Você precisa ter um byte [] no seu database.

Meu byte [] está no meu object Person:

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

Você precisa converter seu byte [] em uma String. Então, eu tenho no meu controlador:

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

Em seguida, no meu arquivo .cshtml, meu modelo é um ViewModel. Isto é o que eu tenho em:

  public String Image { get; set; } 

Eu uso isso no meu arquivo .cshtml:

  

“data: image / image file extension ; base64, {0}, sua imagem String

Eu gostaria que isso ajudasse alguém!

Se você quiser apresentar a imagem, adicione um método como uma class auxiliar ou ao modelo em si e permita que o método converta a imagem da matriz de bytes em um formato de imagem como PNG ou JPG e depois converta para a string Base64. Depois disso, vincule o valor base64 à sua exibição no formato

“data: image / [extensão do tipo de arquivo de imagem] ; base64, [sua string de base64 vai aqui]

O acima é atribuído ao atributo src da tag img .

O único problema que tenho com isso é a string base64 sendo muito longa. Então, eu não recomendaria isso para vários modelos serem exibidos em uma exibição.

Eu criei um método auxiliar com base no abaixo e estou muito feliz que este ajudante pode ajudar o maior número possível.

Com um modelo:

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

O ajudante é:

 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)); } 

A view está recebendo um object: ICollection, então você precisa usá-lo na view em uma declaração foreach:

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