Outputting a byte arrain into the src attribute of an img tag

Question

I'm using ASP.NET MVC and have a model which has an image (byte array) in one of the fields. I'm trying to output this image into the src attribute of the img tag. I'm looking to do something like <img src='<%= Model.VenueImage %>'>. How can I do this?

Answer 1

Maybe Inline Images with Data URLs idea?

Inline images use the data URI scheme to embed images directly within web pages. As defined by RFC 2397, data URIs are designed to embed small data items as "immediate" data, as if they were referenced externally. Using inline images saves HTTP requests over externally referenced objects.

System.Drawing.Image image = GetImageFromSomewhere(...);

byte[] imageData = ImageToByteArray(image);
string imageBase64 = Convert.ToBase64String(imageData);
string imageSrc = string.Format("data:image/gif;base64,{0}", imageBase64);

and then somewhere in the page:

<img src= "<%= ImageSrcBytes %>" />

AFAIK this will work for Opera 7.2+, Firefox, Safari, Netscape, Mozilla and IE8+ (IE8 up to 32kb).

For earlier version of IE there is a workaround - MHTML.

The example how to do it is here.