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

我的控制器分配了值：

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

但我在VS2017中使用.net核心，我找到的答案似乎对我不起作用。任何帮助都会非常感激。

由于约翰

Answer 1

您有两种选择：

Base64编码byte[]并使用数据URI：
```
<img src="data:image/png;base64,[base64-encoded byte array here]">
```
然而，请记住两件事。 1）每个现代浏览器都支持数据URI，但众所周知，IE 10及以下版本不支持。这可能不是问题，但如果您需要传统的IE支持，这是一个非首发。 2）由于你是Base64编码，＆＃34;图像的大小＆＃34;将大约50％的气球。因此，数据URI最适合用于小而简单的图像。如果您拥有大型图片或只是大量图片，那么您的HTML文档可能会变得非常大。由于数据URI实际上嵌入在HTML代码中，这意味着在整个HTML文档加载之前，浏览器实际上根本无法开始呈现页面，这也意味着如果它的大小为兆字节，那么您的用户将会等一会儿。
创建一个操作，从数据库中提取图像并将其作为FileResult返回。这是最佳路径。实质上，您只需要一个接受某种图像标识符的操作，该标识符可用于从数据库中提取它。然后返回byte[]，如：
```
return File(myByteArray, "image/png");
```
在您的视图中，您只需使图像源成为此操作的路径：
```
<img src="@Url.Action("GetImage", "Foo", new { id = myImageIdentifier }">
```

Answer 2

好的，所以我设法在上面的帮助下解决了这个问题。我在控制器上创建了一个如下所示的方法：

    public FileResult GetFileFromBytes(byte[] bytesIn)
    {
        return File(bytesIn, "image/png");
    }

    [HttpGet]
    public async Task<IActionResult> GetUserImageFile()
    {
        var user = await _userManager.GetUserAsync(User);
        if (user == null)
        {
            return null;
        }

        FileResult imageUserFile = GetFileFromBytes(user.UserImage);
        return imageUserFile;
    }

在我的cshtml中我添加了这个：

 <img src= '@Url.Action("GetUserImageFile", "Manage")'/>

“Manage”是控制器名称的开头。我不需要传入ID，因为我的图像字节存储在aspuser上，因此代码知道使用GetUserAsync的用户

有人能看到这个问题吗？此外，它似乎并不关心原始图像是jpeg，但在代码中我使用“image / png”，我是否有冒失去的风险？非常感谢您的评论和帮助！这是一个非常棒的论坛！

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

2 个答案: