MVC如何显示模型中的字节数组图像

我有一个模型，我想在页面上显示一个字节数组图像文件。

我怎样才能做到这一点，而不必回到数据库？

我看到的所有解决scheme使用ActionResult返回到数据库检索图像，但我已经在模型上的图像…

Answer 1

像这样的东西可能工作…

@{ var base64 = Convert.ToBase64String(Model.ByteArray); var imgSrc = String.Format("data:image/gif;base64,{0}", base64); } <img src="@imgSrc" /> 

正如在下面的评论中提到的，请使用上面的知识， 尽pipe这可能回答你的问题，但可能无法解决你的问题 。 根据您的问题，这可能是解决scheme，但我不会完全排除访问数据库两次。

Answer 2

这对我有效

 <img src="data:image;base64,@System.Convert.ToBase64String(Model.CategoryPicture.Content)" width="80" height="80"/> 

Answer 3

我推荐一些东西，即使图像存在于模型中。

我意识到你正在寻求一种直接的方式来从视图中访问它，许多其他人已经回答了这个问题，并告诉你这种方法有什么问题，所以这只是另一种方式，将以asynchronous的方式为你和我加载图像认为是一个更好的方法。

样品型号：

 [Bind(Exclude = "ID")] public class Item { [Key] [ScaffoldColumn(false)] public int ID { get; set; } public String Name { get; set; } public byte[] InternalImage { get; set; } //Stored as byte array in the database. } 

控制器中的示例方法：

 public async Task<ActionResult> RenderImage(int id) { Item item = await db.Items.FindAsync(id); byte[] photoBack = item.InternalImage; return File(photoBack, "image/png"); } 

视图

 @model YourNameSpace.Models.Item @{ ViewBag.Title = "Details"; } <h2>Details</h2> <div> <h4>Item</h4> <hr /> <dl class="dl-horizontal"> <img src="@Url.Action("RenderImage", new { id = Model.ID})" /> </dl> <dl class="dl-horizontal"> <dt> @Html.DisplayNameFor(model => model.Name) </dt> <dd> @Html.DisplayFor(model => model.Name) </dd> </dl> </div> 

Answer 4

一种方法是将其添加到新的C＃类或HtmlExtensions类

 public static class HtmlExtensions { public static MvcHtmlString Image(this HtmlHelper html, byte[] image) { var img = String.Format("data:image/jpg;base64,{0}", Convert.ToBase64String(image)); return new MvcHtmlString("<img src='" + img + "' />"); } } 

那么你可以在任何视图中做到这一点

 @Html.Image(Model.ImgBytes) 

Answer 5

如果你可以base-64编码你的字节，你可以尝试使用结果作为你的图像源。 在你的模型中，你可能会添加如下内容：

 public string ImageSource { get { string mimeType = /* Get mime type somehow (eg "image/png") */; string base64 = Convert.ToBase64String(yourImageBytes); return string.Format("data:{0};base64,{1}", mimeType, base64); } } 

在你看来：

 <img ... src="@Model.ImageSource" /> 

Answer 6

如果图像不是那么大，而且很有可能你会经常重新使用图像，如果图像不是太多，而且图像不是秘密的（这意味着它不是很大处理一个用户是否可能看到另一个人的图像）…

很多“如果”在这里，所以这是一个很好的机会，这是一个坏主意：

您可以在短时间内将图像字节存储在Cache中，并将图像标记指向一个操作方法，然后从caching中读取图像并吐出图像。 这将允许浏览器适当地caching图像。

 // In your original controller action HttpContext.Cache.Add("image-" + model.Id, model.ImageBytes, null, Cache.NoAbsoluteExpiration, TimeSpan.FromMinutes(1), CacheItemPriority.Normal, null); // In your view: <img src="@Url.Action("GetImage", "MyControllerName", new{fooId = Model.Id})"> // In your controller: [OutputCache(VaryByParam = "fooId", Duration = 60)] public ActionResult GetImage(int fooId) { // Make sure you check for null as appropriate, re-pull from DB, etc. return File((byte[])HttpContext.Cache["image-" + fooId], "image/gif"); } 

这在IE7（或IE8，如果大于32kB）内嵌图像不起作用的旧版浏览器中有额外的好处（或者是一个拐杖？）。

Answer 7

如果要呈现图像，请将方法添加为辅助类或模型本身，并允许该方法将字节数组图像转换为PNG或JPG等图像格式，然后转换为Base64string。 一旦你有了，以格式绑定视图上的base64值

“data：image / [图像文件types扩展名] ; base64， [你的base64string在这里] ”

以上分配给img标签的src属性。

我唯一的问题是base64string太长。 所以，我不会推荐它在视图中显示多个模型。

Answer 8

这是我在一个项目上使用的Manoj答案的修改版本。 刚刚更新了一个类，html属性和使用TagBuilder。

  public static IHtmlString Image(this HtmlHelper helper, byte[] image, string imgclass, object htmlAttributes = null) { var builder = new TagBuilder("img"); builder.MergeAttribute("class", imgclass); builder.MergeAttributes(new RouteValueDictionary(htmlAttributes)); var imageString = image != null ? Convert.ToBase64String(image) : ""; var img = string.Format("data:image/jpg;base64,{0}", imageString); builder.MergeAttribute("src", img); return MvcHtmlString.Create(builder.ToString(TagRenderMode.SelfClosing)); } 

其中可以使用如下：

  @Html.Image(Model.Image, "img-cls", new { width="200", height="200" }) 

Answer 9

我创build了一个基于下面的帮助器方法，我很高兴这个帮助器可以帮助尽可能多的帮助。

用一个模型：

  public class Images { [Key] public int ImagesId { get; set; } [DisplayName("Image")] public Byte[] Pic1 { get; set; } } 

帮手是：

 public static IHtmlString GetBytes<TModel, TValue>(this HtmlHelper<TModel> helper, System.Linq.Expressions.Expression<Func<TModel, TValue>> expression, byte[] array, string Id) { TagBuilder tb = new TagBuilder("img"); tb.MergeAttribute("id", Id); var base64 = Convert.ToBase64String(array); var imgSrc = String.Format("data:image/gif;base64,{0}", base64); tb.MergeAttribute("src", imgSrc); return MvcHtmlString.Create(tb.ToString(TagRenderMode.SelfClosing)); } 

该视图正在接收：ICollection对象，因此您需要在foreach语句的视图中使用它：

  @foreach (var item in Model) @Html.GetBytes(itemP1 => item.Pic1, item.Graphics, "Idtag") } 

Answer 10

你需要在你的数据库中有一个字节[]。

我的字节[]在我的Person对象中：

 public class Person { public byte[] Image { get; set; } } 

你需要在string中转换你的byte []。 所以，我有我的控制器：

 String img = Convert.ToBase64String(person.Image); 

接下来，在我的.cshtml文件中，我的Model是一个ViewModel。 这是我在：

  public String Image { get; set; } 

我在我的.cshtml文件中使用它：

 <img src="@String.Format("data:image/jpg;base64,{0}", Model.Image)" /> 

“data：图像/ 图像文件扩展名 ; base64，{0}， 图像string ”

我希望它会帮助别人！