将字节数组转换为图像并在 Razor 视图中显示

Posted 2023-03-15

【中文标题】将字节数组转换为图像并在 Razor 视图中显示

【英文标题】：Convert Byte Array to image and display in Razor View

【发布时间】：2011-11-25 12:37:21

【问题描述】：

我使用 EF 4.1 Code First，为了简单起见，假设我有以下实体类：

public class Person

    public int Id  get; set; 
    public string Name  get; set; 
    public Byte[] Image  get; set; 

我已经设法创建了一个允许将 Person 对象添加到数据库中的有效创建视图。

但是当我要显示一个人的详细信息时，我会卡在显示图像上。经过一番研究，我有以下几点：

// To convert the Byte Array to the author Image
public FileContentResult getImg(int id)

    byte[] byteArray = DbContext.Persons.Find(id).Image;
    return byteArray != null 
        ? new FileContentResult(byteArray, "image/jpeg") 
        : null;

在我试图列出人员详细信息的视图中，我有以下内容来显示要显示的图像：

<img src="@html.Action("getImg", "Person", new  id = item.Id )"  />

但是以上方法不起作用，我的图像源 [src] 属性返回空。

【参考方案1】：

如果您的模型中已经加载了图像，还有一种更简单的方法：

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

这样做，您无需再次访问服务器，只需从数据库中获取图像byte[]。

【讨论】：

但它是pdf文件还是word文件。我们如何显示可能是预览剃须刀代码中的内容的链接。在控制器动作中提供我们有字节数组。

@Unbreakable - 我建议您将其作为 Stack Overflow 上的一个单独问题提出，而不是使用 cmets。您可以在此处发布链接，以便用户查看。

【参考方案2】：

像这样：

<img src="@Url.Action("getImg", "Person", new  id = item.Id )"  />

您需要Url.Action 而不是Html.Action，因为您只想为GetImg 操作生成一个网址。 Html.Action 做了一些事情 entirely different。

【讨论】：

但是如果它是某个 PDF 文件的字节数组呢？我们如何显示预览链接或可能是下载 pdf 的链接。 .

如果不是图片怎么办。我们该如何处理。显然我们不能为 pdf 放置 img src 标签

【参考方案3】：

我发现从 Razor MVC 页面中的模型属性显示动态加载的 SVG 图像的最佳方法是将 Html.DisplayFor(..) 与 .ToHTMLString() 结合使用。就我而言，将一个基本 64 位 SVG Image+XML 数据字符串存储在名为 Image 的模型属性中。这是我的代码：

<img src='@Html.DisplayFor(model => model.Image).ToHtmlString()' />

这似乎是我能够让 SVG 图像在 Chrome、FireFox 和 IE 中正确显示的唯一方法。

干杯