Cannot render byte[] as an Image in MVC 5 ASP.Net

Question

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.

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

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

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 Category class

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

Action method

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

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

Emre Kabaoglu · Accepted Answer · 2017-12-07 19:57:16Z

4

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

And then put the Base64String property inside img attribute.

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

edited Dec 7, 2017 at 19:57

answered Dec 7, 2017 at 17:36

Emre Kabaoglu

13.2k4 gold badges27 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Sunil Over a year ago

It still does not work after I changed to your format.

Emre Kabaoglu Over a year ago

Would you share HTML output ?

Sunil Over a year ago

You can see the detailed output in this video: screencast.com/t/kk7bYdnEpc

Sunil Over a year ago

I am using the standard Northwind database which comes pre-populated with data. If you have this database on your computer, then go to Categories table and the last column holds an Image data type of column. So, I am not saving any data but just retrieving it.

Sunil Over a year ago

May be this image column was for Access database when originally created and never got changed when migrated to SQL Server!

|

Collectives™ on Stack Overflow

Cannot render byte[] as an Image in MVC 5 ASP.Net

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related