Load Image Src from Byte[] Asp.Net MVC 3

c# asp.net-mvc-3 image src
user1513030 picture user1513030 · Sep 6, 2012 · Viewed 7.3k times · Source

I have an ASP.net MVC 3 application where I want to store an image as bytes in the model and then load it from the model into the src attribute of an html image tag.

e.g. 

//Property in Model
 public byte[] Image { get; set; }

But when I try this it errors:

<img src = "@Model.Image" alt=""/>

How can I load the image from bytes? I want to avoid calling the Controller again to get the image as a FileResult.

Is it possible?

Answer

John Gietzen picture John Gietzen · Sep 6, 2012

The easiest way is something like this:

<img src="data:image/png;base64,@System.Convert.ToBase64String(Model.Image)" alt=""/>

This assumes a PNG payload and is not very well supported by legacy browsers.

I would actually recommend saving it to disk and letting your web server host it up separately.

Related questions

Entity Framework 5 Updating a Record

I have been exploring different methods of editing/updating a record within Entity Framework 5 in an ASP.NET MVC3 environment, but so far none of them tick all of the boxes I need. I'll explain why. I have found three …

Read More
Returning a file to View/Download in ASP.NET MVC

I'm encountering a problem sending files stored in a database back to the user in ASP.NET MVC. What I want is a view listing two links, one to view the file and let the mimetype sent to the browser …

Read More
The type or namespace name does not exist in the namespace 'System.Web.Mvc'

Buiding MVC3 solution went well but have got an error in browser: Compiler Error Message: CS0234: The type or namespace name 'Html' does not exist in the namespace 'System.Web.Mvc' (are you missing an assembly reference?) Source Error: Line 25: &…

Read More