MVC Comment afficher une image de tableau d’octets à partir d’un modèle

Quelque chose comme ça peut marcher …

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

Comme mentionné dans les commentaires ci-dessous, veuillez utiliser les éléments ci-dessus en sachant que même si cela peut répondre à votre question, cela ne résoudra peut-être pas votre problème . En fonction de votre problème, cela peut être la solution mais je n’exclurais pas complètement l’access à la firebase database deux fois.

Cela a fonctionné pour moi

Je recommande quelque chose en ce sens, même si l’image est à l’intérieur de votre modèle.

Je me rends compte que vous demandez un moyen direct d’y accéder directement depuis la vue et beaucoup d’autres ont répondu à cela et vous ont dit ce qui ne va pas avec cette approche, donc c’est juste une autre façon de charger l’image pour vous et moi pense que c’est une meilleure approche.

Modèle d’échantillon:

 [Bind(Exclude = "ID")] public class Item { [Key] [ScaffoldColumn(false)] public int ID { get; set; } public Ssortingng Name { get; set; } public byte[] InternalImage { get; set; } //Stored as byte array in the database. } 

Exemple de méthode dans le contrôleur:

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

Vue

 @model YourNameSpace.Models.Item @{ ViewBag.Title = "Details"; } 
Details
 
 
Item
 
 
  
 
 
 @Html.DisplayNameFor(model => model.Name) 
 
 @Html.DisplayFor(model => model.Name) 
 
  

Une façon consiste à append ceci à une nouvelle classe c # ou à une nouvelle classe HtmlExtensions

 public static class HtmlExtensions { public static MvcHtmlSsortingng Image(this HtmlHelper html, byte[] image) { var img = Ssortingng.Format("data:image/jpg;base64,{0}", Convert.ToBase64Ssortingng(image)); return new MvcHtmlSsortingng(""); } } 

alors vous pouvez le faire dans n’importe quelle vue

 @Html.Image(Model.ImgBytes) 

Si vous pouvez encoder vos octets en base 64, vous pouvez essayer d’utiliser le résultat comme source d’image. Dans votre modèle, vous pouvez append quelque chose comme:

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

Et à votre avis:

Si l’image n’est pas si grande, et si vous avez de bonnes chances de réutiliser l’image souvent, et si vous n’en avez pas trop, et si les images ne sont pas secrètes traiter si un utilisateur pourrait potentiellement voir l’image d’une autre personne) …

Beaucoup de “si” ici, il y a donc de fortes chances que ce soit une mauvaise idée:

Vous pouvez stocker les octets d’image dans le Cache pendant une courte période et créer une balise d’image orientée vers une méthode d’action, qui à son tour lit à partir du cache et crache votre image. Cela permettra au navigateur de mettre en cache l’image de manière appropriée.

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

Cela a l’avantage supplémentaire (ou est-ce une bêtise?) De travailler dans des navigateurs plus anciens, où les images en ligne ne fonctionnent pas dans IE7 (ou IE8 si la taille est supérieure à 32 Ko).

Ceci est une version modifiée de la réponse de Manoj que j’utilise sur un projet. Juste mis à jour pour prendre une classe, les atsortingbuts HTML et utiliser le TagBuilder.

  public static IHtmlSsortingng Image(this HtmlHelper helper, byte[] image, ssortingng imgclass, object htmlAtsortingbutes = null) { var builder = new TagBuilder("img"); builder.MergeAtsortingbute("class", imgclass); builder.MergeAtsortingbutes(new RouteValueDictionary(htmlAtsortingbutes)); var imageSsortingng = image != null ? Convert.ToBase64Ssortingng(image) : ""; var img = ssortingng.Format("data:image/jpg;base64,{0}", imageSsortingng); builder.MergeAtsortingbute("src", img); return MvcHtmlSsortingng.Create(builder.ToSsortingng(TagRenderMode.SelfClosing)); } 

Ce qui peut être utilisé comme suit:

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

Vous devez avoir un octet [] dans votre firebase database.

Mon octet [] est dans mon object Person:

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

Vous devez convertir votre octet [] dans une chaîne. Donc, j’ai dans mon contrôleur:

 Ssortingng img = Convert.ToBase64Ssortingng(person.Image); 

Ensuite, dans mon fichier .cshtml, mon modèle est un ViewModel. C’est ce que j’ai dans:

  public Ssortingng Image { get; set; } 

Je l’utilise comme ça dans mon fichier .cshtml:

“data: extension de fichier image / image ; base64, {0}, votre image Ssortingng ”

Je souhaite que ça aide quelqu’un!