Load Image Src von Byte[] Asp.Net MVC 3

Question

Ich habe eine ASP.net MVC 3-Anwendung, wo ich ein Bild als Bytes im Modell speichern und dann laden Sie es aus dem Modell in das src-Attribut eines HTML-Bild-Tag.

z.B..

//Property in Model
 public byte[] Image { get; set; }

Aber wenn ich das versuche, tritt ein Fehler auf:

<img src = "@Model.Image" alt=""/>

Wie kann ich das Bild aus Bytes laden? Ich möchte vermeiden, den Controller erneut aufzurufen, um das Bild als FileResult zu erhalten.

Ist das möglich?

Answer 1

Der einfachste Weg ist folgender:

<img src="data:image/png;base64,@System.Convert.ToBase64String(Model.Image)" alt=""/>

Dies setzt eine PNG-Nutzlast voraus und wird von älteren Browsern nicht sehr gut unterstützt.

Ich würde sogar empfehlen, die Datei auf der Festplatte zu speichern und sie separat auf Ihrem Webserver zu hosten.

Answer 2

Sie können das Bild direkt als base64-kodierte Zeichenfolge einbetten.

Ejemplo:

<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7" 
width="16" height="14" alt="embedded folder icon">

Die Größe der Daten ist im Internet Explorer 8 auf 32 KiB begrenzt. Außerdem führt base64 zu einem Overhead von 33 %.

Weitere Informationen: http://en.wikipedia.org/wiki/Data_URI_scheme