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 lo

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.

Answer 2

The browser uses the src attribute to issue a separate request to the server, to get the contents of the image. It does not display the bytes in the src as the image itself.

So you will need to remember those bytes (session?) and use a handler (the url you put into the src attribute) to let the browser request them.