Wie man Bilder mit der HtmlHelper-Klasse anzeigt - ASP.NET MVC

Question

Ich bin derzeit mit diesem Problem der Anzeige eines Bildes mit HtmlHelper-Klasse stecken.

Hier ist, was ich habe.

Ich habe eine benutzerdefinierte HtmlHelper-Klasse, die ein Bild anzeigen soll:

public static string Images(this HtmlHelper helper, ......){

    var writer = new HtmlTextWriter(new StringWriter());
    byte[] bytearray = ... // some image byte array retrieved from an object.

    // begin html image tag - this is where the problem is
    writer.AddAttribute(HtmlTextWriterAttribute.Src, url.Action("GetPhoto", "Clinical", new { image = bytearray })); 
    writer.RenderBeginTag(HtmlTextWriterTag.Img); 
    writer.RenderEndTag();
    // end of image tag

    return writer.InnerWriter.ToString();
}

Also, was ich versucht, oben zu tun ist, um eine Url.Action in das Attribut img Quelle zu injizieren.

Ich habe einen Controller "GetPhoto", der dieses Bytearray verarbeiten und ein Bild zurückgeben soll.

public FileContentResult GetPhoto(byte[] image)
        {

            return File(image, "image/jpeg");
        }

Ich habe es geschafft, auf den Controller zuzugreifen, aber das Bild wird als Null angezeigt. Gibt es eine Möglichkeit, dies zu umgehen? oder vielleicht einen noch besseren Weg, dies zu tun? Ihre Hilfe wird sehr geschätzt werden, Danke!

Answer 1

Es gibt einige Probleme mit Ihrer Controller-Aktion. Sie erwartet, dass das Bild als Byte-Array übergeben wird. In Ihrer Hilfsklasse versuchen Sie, ein img Tag, das auf diese Controller-Aktion verweist und ein Byte-Array übergibt, aber das wird nicht funktionieren, weil Sie keine Byte-Arrays mit GET-Anfragen übergeben können. Sie müssen diese Controller-Aktion so ändern, dass sie statt eines Byte-Arrays z. B. einen Bezeichner annimmt, mit dem Sie das Bild abrufen und in den Ausgabestrom schreiben können. Dann wird Ihr HTML-Helfer diesen Bezeichner übergeben, wenn er die img Tag.

public FileContentResult GetPhoto(string imageId)
{
    byte[] image = _repository.GetPhoto(imageId);
    return File(image, "image/jpeg");
}

Und Ihre Helferin:

public static string Images(this HtmlHelper htmlHelper, string id,string alt)
{
    var urlHelper = ((Controller)htmlHelper.ViewContext.Controller).Url; 
    var photoUrl = urlHelper.Action("GetPhoto", "Clinical", new { imageId = id });
    var img = new TagBuilder("img");
    img.MergeAttribute("src", photoUrl);
    img.MergeAttribute("alt", alt);
    return img.ToString(TagRenderMode.SelfClosing);
}

Die Ihrer Meinung nach verwendet werden könnten:

<%= Html.Images("123") %>

Answer 2

Wenn Sie ein Bild-Tag auf einer Seite rendern, tun Sie genau das: Sie rendern ein Bild-"Tag", d. h. ein Tag, das auf ein Bild verweist, das sich z. B. an anderer Stelle befindet:

<img src="/image/someImage.jpg" />

Also ich bin nicht sicher, warum Sie ein Bytearray direkt in Ihrem Image Helper verarbeiten. Erwarten Sie, dass die Bytes des Bildes direkt in das HTML-Markup gerendert werden, wie dies:

<img src="/Clinical/GetPhoto/¾¶nR¿õÐø©èxð·T£lÅ>QŽ'šrHjHVuã;Ìí¨È<" />

Wenn ja, dann funktioniert das irgendwie nicht*. Überlegen Sie mal: Bei einem 1 MB großen Bild hätten Sie mehr als 1 MB HTML-Dokument, das Ihr Browser herunterladen und verarbeiten müsste, was die Seite dramatisch verlangsamen würde. Wenn es sich bei den Bildern um externe Verweise handelt, wie im ersten Beispiel, kann der Browser die Seite effizienter verarbeiten, indem er zuerst den HTML-Code rendert und dann die externen Bilder abruft. Wenn es sich bei den Bildern um externe Dateien handelt, profitieren Sie auch von den Vorteilen des Browser-Caching.

Ihr Bild muss irgendwo anders gespeichert werden, z.B. als Datei in einem Ordner in Ihrer Webapp. Dann übergeben Sie eine URL des Bildes an das ViewModel (und damit an die Ansicht) und NICHT die Rohbilddaten selbst. z.B..

public static string Image(this HtmlHelper helper, string url)
{
    var writer = new HtmlTextWriter(new StringWriter());

    writer.AddAttribute(HtmlTextWriterAttribute.Src, url); 
    writer.RenderBeginTag(HtmlTextWriterTag.Img); 
    writer.RenderEndTag();

    return writer.InnerWriter.ToString();
}

und Ihr ViewModel...

public class Product
{
    public string Title { get; set; }
    public string Description { get; set; }
    public string ImageUrl { get; set }
}

und Ihre aspx-Ansicht...

<h1><%= Html.Encode(Model.Title) %></h1>

<%= Html.Image(Model.ImageUrl) %>

<p><%= Html.Encode(Model.Description) %></p>

---

* Technisch ist es möglich, dies mit einem Programm namens Daten-URI-Schema aber es wird nicht allgemein unterstützt und in diesem Fall auch nicht empfohlen. Es ist wirklich für unglaublich kleine Bilder gedacht, oder für die dynamische Anzeige von Bildern über JavaScript (z. B. Bilddaten aus einer Leinwand gegriffen).