asp.net-mvc 将字节数组转换为图像并在 Razor 视图中显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7560830/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Convert Byte Array to image and display in Razor View
提问by J86
I am using EF 4.1 Code Firstand for the sake of simplicity, let's say I have the following Entity class:
我使用的是EF 4.1 Code First，为了简单起见，假设我有以下实体类：
public class Person
{
public int Id { get; set; }
public string Name { get; set; }
public Byte[] Image { get; set; }
}
I have managed to create a working Create View that allows the Addition of a Person object into the Database.
我设法创建了一个工作创建视图，允许将 Person 对象添加到数据库中。
But when I come to display the details for a Person, I get stuck on displaying the image. After doing some research, I have the following:
但是当我要显示一个人的详细信息时，我会卡在显示图像上。在做了一些研究之后，我有以下几点：
// 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;
}
And in the View where I am attempting to list the Person details, I have the following to get the Image to display:
在我试图列出人员详细信息的视图中，我有以下内容来显示图像：
<img src="@Html.Action("getImg", "Person", new { id = item.Id })" alt="Person Image" />
However the above is not working, my image source [src] attribute returns empty.
但是上面的方法不起作用，我的图像源[src] 属性返回 empty。
采纳答案by Darin Dimitrov
Like this:
像这样：
<img src="@Url.Action("getImg", "Person", new { id = item.Id })" alt="Person Image" />
You need Url.Actionand not Html.Actionbecause you just want to generate an url to the GetImgaction. Html.Actiondoes something entirely different.
您需要Url.Action而不是Html.Action因为您只想生成操作的 url GetImg。Html.Action做一些完全不同的事情。
回答by Leniel Maccaferri
There's an even easier way of doing this if you already happen to have the image loaded in your model:
如果您已经在模型中加载了图像，还有一种更简单的方法：
<img src="data:image;base64,@System.Convert.ToBase64String(Model.Image)" />
Doing this way you do not need to go to the server again just to fetch the image byte[]from the database as you're doing.
通过这种方式，您无需再次访问服务器，只需byte[]像您一样从数据库中获取图像即可。
回答by sondlerd
I found that the best way to display a dynamically loaded SVG image from a Model property in a Razor MVC page is to use Html.DisplayFor(..) in combination with .ToHTMLString(). For my case, have a base 64 SVG Image+XML data string stored in the model property named Image. Here is my code:
我发现从 Razor MVC 页面中的模型属性显示动态加载的 SVG 图像的最佳方法是将 Html.DisplayFor(..) 与 .ToHTMLString() 结合使用。就我而言，在名为 Image 的模型属性中存储了一个 base 64 SVG Image+XML 数据字符串。这是我的代码：
<img src='@Html.DisplayFor(model => model.Image).ToHtmlString()' />
This seemed be the only way I was able to get the SVG image to display properly in Chrome, FireFox and IE.
这似乎是我能够让 SVG 图像在 Chrome、FireFox 和 IE 中正确显示的唯一方法。
Cheers
干杯
