在ASP.NET MVC Core中显示字节数组中的图像 [英] Display image from byte array in ASP.NET MVC Core

问题描述

我在数据库表的VARBINARY(MAX)列中存储了一个byte[]. 我想在我的index.cshtml页面上显示此图像-但我被卡住了.

I have a byte[] stored in a VARBINARY(MAX) column in a table in my database. I want to show this image on my index.cshtml page - but I'm stuck.

我的CSHTML如下:

My CSHTML looks like this:

@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="...." /> 

很明显，我不知道该怎么办.

obviously I don't know what to do here.

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

My model has the byte array data:

 public byte[] UserImage { get; set; }

我的控制器分配了该值:

My controller assigned that the value:

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

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

but I am using .net core in VS2017 and the answers I have found don't seem to work for me. Any help would be really appreciated.

谢谢 约翰

推荐答案

您有两个选择:

1. Base64对byte[]进行编码并使用数据URI:

1. Base64 encode the byte[] and use a Data 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文档之前完全开始呈现页面，这也意味着如果它的大小为兆字节，则用户将等待一会儿. .

However, bear in mind two things. 1) Data URIs are supported in every modern browser, but notoriously do not work in IE 10 and under. That may not be an issue, but if you need to have legacy IE support, this is a non-starter. 2) Since you're Base64-encoding, the size of the "image" will balloon roughly 50%. As such, Data URIs are best used with small and simple images. If you've got large images or simply a lot of images, your HTML document can become a very large download. Since Data URIs are actually embedded in the HTML code, that means the browser cannot actually begin to render the page at all until the entire HTML document has loaded, which then also means that if it's megabytes in size, your users will be waiting a while.

创建一个操作，该操作从数据库中提取图像并将其作为FileResult返回.这是最佳路径.本质上，您只需要一个可以接受某种形式的图像标识符的操作即可将其从数据库中提取出来.然后，您返回byte[]，如:

Create an action that pulls the image from the database and returns it as a FileResult. This is the most optimal path. Essentially, you just need an action that accepts some sort of identifier for the image, which can be used to pull it from the database. You then return the byte[] like:

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

在您看来，您只需将图像源设置为执行此操作的路线即可:

In your view, you simply make the image source the route to this action:

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

这篇关于在ASP.NET MVC Core中显示字节数组中的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！