webentwicklung-frage-antwort-db.com.de

Zeigen Sie mit ASP.Net MVC3 ein in einem Byte [] enthaltenes Bild an

Ich habe eine Ansicht mit einem starken Typ. Dieser starke Typ hat ein Feld bestehend aus einem Byte [], dieses Array enthält ein Bild.

Ist es möglich, dieses Bild mit so etwas wie @ Html.Image (Model.myImage) anzuzeigen?

Vielen Dank

20
J4N

Sie können eine Controller-Aktionsmethode erstellen, die ein Bild als FileContentResult zurückgibt:

public FileContentResult Display(string id) {
   byte[] byteArray = GetImageFromDB(id);
   return new FileContentResult(byteArray, "image/jpeg");
}

Anschließend können Sie mithilfe der Bild-ID aus dem Modell einen ActionLink zur Aktionsmethode in der Ansicht erstellen.

17
Dmitry S.

Es kommt darauf an, wie groß das Bild ist. Wenn es klein ist, können Sie etwas schreiben, um es mit base-64 zu codieren und in das HTML einzubetten, wie jedes dieser .

Für ein konkretes Beispiel von hier :

<img src="data:image/gif;base64,R0lGODlhUAAPAKIAAAsLav///88PD9WqsYmApmZmZtZfYmdakyH5BAQUAP8ALAAAAABQAA8AAAPbWLrc/jDKSVe4OOvNu/9gqARDSRBHegyGMahqO4R0bQcjIQ8E4BMCQc930JluyGRmdAAcdiigMLVrApTYWy5FKM1IQe+Mp+L4rphz+qIOBAUYeCY4p2tGrJZeH9y79mZsawFoaIRxF3JyiYxuHiMGb5KTkpFvZj4ZbYeCiXaOiKBwnxh4fnt9e3ktgZyHhrChinONs3cFAShFF2JhvCZlG5uchYNun5eedRxMAF15XEFRXgZWWdciuM8GCmdSQ84lLQfY5R14wDB5Lyon4ubwS7jx9NcV9/j5+g4JADs=" alt="British Blog Directory" width="80" height="15">

Wenn das Bild eine nennenswerte Größe hat, möchten Sie möglicherweise stattdessen eine Route schreiben, die das Nachschlagen über einen Schlüssel zum Bild ermöglicht, dh eine Route wie /images/{id} - in dieser Route holen Sie die Bildbinärdatei und verwenden zusätzlich return File(bytes, contentType) Festlegen von Caching-Headern (und erneutes Überprüfen der erforderlichen Sicherheit). In deinem html hättest du einfach eine

<img src="/images/@imageId" ... />

(mit Rasiermessersyntax, aber ähnlich für Aspx).

Der separate Routenansatz erfordert einen zusätzlichen Hop zum Server, ermöglicht jedoch das Zwischenspeichern auf dem Client (der Inline-Base-64-Ansatz stellt die Daten für jede Anforderung bereit).

8
Marc Gravell

Wenn Sie das Bild bereits als byte[]-Array in Ihr Modell geladen haben, können Sie dies tun, wie @Marc Gravell in seiner Antwort: erwähnt.

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

Dies vereinfacht den gesamten Vorgang erheblich, und Sie müssen keine bestimmte FileContentResult-Aktionsmethode verwenden und die Datenbank erneut aufrufen (siehe @Dmitry Ss answer ), um das byte[]-Array mit Ihrem Bild/Foto abzurufen, da Sie bereits über eine verfügen Es wurde in Ihr Modell geladen.

7

Klingt so, als bräuchten Sie eine neue Aktion, die das Byte-Array (aus einer Datenbank?) Abruft und das Bild über die Methode File zurückgibt.

Generieren Sie dann einen Anker, der auf diese Aktion verweist. Auf diese Weise kann das Bild geladen werden, während die Seite geladen wird, wodurch die Anzeige beschleunigt wird.

4
Kieron
1
Elan Hasson

Ich würde einen einfachen generischen Handler zum Bereitstellen Ihrer Bilder entwerfen. Dieser Handler kann mit bestimmten Parametern Bilder aus der Datenbank laden und in den http-Ausgabestream schreiben.

public class UserImage : IHttpHandler
{
    public bool IsReusable
    {
        get { return false; }
    }

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "image/jpeg";

        // Get the stream from the database
        var image = System.Drawing.Image.FromStream(stream);

        image.Save(context.Response.OutputStream, ImageFormat.Jpeg);
    }
}
0
DEHAAS