asp.net-mvc - 在 ASP.NET MVC Core 中显示来自字节数组的图像

Question

我有一个 byte[]存储在 VARBINARY(MAX)我的数据库表中的列。
我想在我的 index.cshtml 上展示这张图片页面 - 但我被卡住了。

我的 CSHTML 看起来像这样:

@using Microsoft.AspNetCore.Hosting.Internal
@{
    ViewData["Title"] = "Title";
}
<h2>@ViewData["Title"]</h2>
<h3>@ViewData["Message"]</h3>
@if (!Context.User.Identity.IsAuthenticated)
{
    <p>blah blah.</p>

    <p>blah blah</p>
}

@if (Context.User.Identity.IsAuthenticated)
{
    <p>Hi @(Context.User.Identity.Name)<br/></p>


    <p>Where we off to today?</p>
}

我想添加

<img src="...." /> 

显然我不知道在这里做什么。

我的模型有字节数组数据:

 public byte[] UserImage { get; set; }

我的 Controller 分配了该值:

  var model = new IndexViewModel
            {
                Username = user.UserName,
                Email = user.Email,
                PhoneNumber = user.PhoneNumber,
                IsEmailConfirmed = user.EmailConfirmed,
                StatusMessage = StatusMessage,
                UserImage = user.UserImage
            };

但我在 VS2017 中使用 .net core，我发现的答案似乎对我不起作用。任何帮助将非常感激。

谢谢
约翰

Answer 1

您有两个选择:

Base64 编码 byte[]并使用数据 URI:

<img src="data:image/png;base64,[base64-encoded byte array here]">

但是，请记住两件事。 1) 每个现代浏览器都支持数据 URI，但众所周知，它不适用于 IE 10 及更低版本。这可能不是问题，但如果您需要获得旧版 IE 支持，这将是一个不切实际的问题。 2) 由于您使用 Base64 编码，“图像”的大小将膨胀大约 50%。因此，数据 URI 最好与小而简单的图像一起使用。如果您有大图像或只是大量图像，您的 HTML 文档可能会变得非常大。由于数据 URI 实际上嵌入在 HTML 代码中，这意味着在整个 HTML 文档加载之前，浏览器实际上根本无法开始呈现页面，这也意味着如果它的大小为兆字节，您的用户将等待一段时间.

创建一个从数据库中提取图像并将其作为 FileResult 返回的操作。 .这是最理想的路径。本质上，您只需要一个 Action 来接受图像的某种标识符，该标识符可用于从数据库中提取它。然后您返回 byte[]喜欢:

return File(myByteArray, "image/png");

在您看来，您只需将图像源设为此操作的路径:

<img src="@Url.Action("GetImage", "Foo", new { id = myImageIdentifier }">