如何使用 HtmlHelper 类 - ASP.NET MVC 显示图像

Question

我目前遇到了使用 HtmlHelper 类显示图像的问题。

这就是我所拥有的。

我有一个应该显示图像的自定义 HtmlHelper 类：

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

所以我上面尝试做的是将 Url.Action 注入到 img 源属性中。

我有一个控制器“GetPhoto”，它应该处理那个字节数组并返回一个图像。

public FileContentResult GetPhoto(byte[] image)
        {

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

我设法到达控制器，但图像显示为空。有办法解决吗？或者可能有更好的方法来做到这一点？非常感谢您的帮助，谢谢！

Answer 1

您的控制器操作存在一些问题。它希望将图像作为字节数组传递。在您的助手类中，您尝试生成一个指向此控制器操作并传递字节数组的img 标记，但这不起作用，因为您无法使用 GET 请求传递字节数组。您需要更改此控制器操作，以便不接受字节数组，而是采用一些标识符，该标识符允许您获取图像并将其写入输出流。然后您的 html 助手将在生成 img 标记时传递此标识符。

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

还有你的助手：

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

在你的视图中可以使用：

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

Answer 2

当您在页面上渲染图像标签时，您正在这样做，渲染图像“标签”，换句话说，标签引用位于别处的图像，例如：

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

所以我不确定您为什么要直接在 Image Helper 中处理字节数组。您是否希望将图像的字节直接呈现到 HTML 标记中，如下所示：

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

如果是这样，那就不是它的工作方式*。想想看，如果你有一个 1MB 的图像，你的浏览器必须下载和处理超过 1MB 的 HTML 文档，这会大大降低页面速度。当图像是外部引用时，就像第一个示例一样，浏览器可以更有效地处理页面，首先呈现 HTML，然后抓取外部图像。当图像是外部文件时，您还可以获得浏览器缓存的好处。

您的图片需要存储在其他地方，例如。作为 webapp 中某个文件夹中的文件。然后将图像的 URL 传递给 ViewModel（以及视图），而不是原始图像数据本身。例如。

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

还有你的 ViewModel...

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

还有你的 aspx 视图...

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

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

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

---

* 从技术上讲，可以使用名为 Data URI Scheme 的东西来执行此操作，但它没有得到广泛支持，并且在这种情况下不建议在任何地方使用。它确实适用于非常小的图像，或者通过 JavaScript 动态显示图像（例如，从画布中抓取的图像数据）。