无法在MVC 5 ASP.Net中将byte []呈现为图像 [英] Cannot render byte[] as an Image in MVC 5 ASP.Net

问题描述

我有一个使用Northwind数据库的简单MVC 5应用程序.该视图正在显示Northwind中Categories表中的类别列表.我尝试使用img tag渲染字节数组，但没有成功.

I have a simple MVC 5 app using Northwind database. The view in question is displaying a list of categories from Categories table in Northwind. I have tried to render the byte array using an img tag but without success.

我看过 MVC如何显示模型中的字节数组图像，并尝试使用自定义html帮助器，但即使这样也不起作用

I have looked at MVC How to display a byte array image from model and tried using a custom html helper but even that did not work

在将byte []转换为图像时，我的方法中是否缺少某些东西?

Is there something I am missing in my approach when converting a byte[] to an image?

尝试了以下操作(请查看img标签以了解我的尝试)

Tried following ( look at img tag for what I tried)

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.CategoryName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Description)
        </td>
        <td>
            <img src="@String.Format("data:image/jpg;base64,{0}", Convert.ToBase64String(item.Picture))" />
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.CategoryID }) |
            @Html.ActionLink("Details", "Details", new { id=item.CategoryID }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.CategoryID })
        </td>
    </tr>
}

EF类别类

public partial class Category
{
    public int CategoryID { get; set; }

    [Required]
    [StringLength(15)]
    public string CategoryName { get; set; }

    [Column(TypeName = "ntext")]
    public string Description { get; set; }

    [Column(TypeName = "image")]
    public byte[] Picture { get; set; }
}

操作方法

  public class CategoriesController : Controller
  {
        private NorthwindDB db = new NorthwindDB();

        // GET: Categories
        public ActionResult Index()
        {
            return View(db.Categories.ToList());
        }
  }

推荐答案

我发现将Nortwind图像转换为base64字符串格式并不容易.我找到了源.根据说明，"Northwind映像是使用Microsoft Access创建的，因此它们具有78字节的OLE标头"..因此，我们应该删除标题.首先，修改Category实体.

I figured out that it is not easy the convert Nortwind image to format base64 string. I found a source. According to explanation, "Northwind images were created with Microsoft Access so they have a 78 byte OLE header". So, we should remove the headers. Firstly, modify Category entity.

public partial class Category
{
    public int CategoryID { get; set; }

    [Required]
    [StringLength(15)]
    public string CategoryName { get; set; }

    [Column(TypeName = "ntext")]
    public string Description { get; set; }

    [Column(TypeName = "image")]
    public byte[] Picture { get; set; }

    [NotMapped]
    public string Base64String
    {
        get
        {
            var base64Str = string.Empty;
            using (var ms = new MemoryStream())
            {
                int offset = 78;
                ms.Write(Picture, offset, Picture.Length - offset);
                var bmp = new System.Drawing.Bitmap(ms);
                using (var jpegms = new MemoryStream())
                {
                    bmp.Save(jpegms, System.Drawing.Imaging.ImageFormat.Jpeg);
                    base64Str = Convert.ToBase64String(jpegms.ToArray());
                }
            }
            return base64Str;
        }
    }
}

然后将Base64String属性放在img属性中.

And then put the Base64String property inside img attribute.

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

这篇关于无法在MVC 5 ASP.Net中将byte []呈现为图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！