Download Src image from byte [] Asp.Net MVC 3

Question

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

eg.

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

But when I try this, these are errors:

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

How to load an image from bytes? I want to avoid calling the controller again to get the image as FileResult.

Is it possible?

Answer 1

The easiest way is something like this:

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

This assumes the PNG payload and is not well supported by older browsers.

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

Answer 2

You can directly embed the image in base64 encoding.

Example:

 <img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/ /ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7" width="16" height="14" alt="embedded folder icon"> 

The data size is limited to 32 KB in Internet Explorer 8. In addition, base64 results in 33% overhead.

Additional information: http://en.wikipedia.org/wiki/Data_URI_scheme