Streaming byte[] to Image in ASP.NET C#

I have an Image stored in my SQL Server database stored with my User data which I retrieve all at once.

Now I have the byte[] directly on the page I want to show it on. How do I put it in my WebControls.Image? I don’t want to have to call an HttpHandler and call the database again.

This obviously just outputs it to the whole page.

            Context.Response.BinaryWrite(user.Picture.ToArray());

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

If it is a small image you would output it as base64 encoded data into an image-tag.
See here for a similar situation.

But in 99.9% of all situations you would create a HttpHandler that returns the image. It is the easiest and fastest way to do it I think.

Method 2

Wrap the byte array in a MemoryStream object and place that in ASP.NETs Cache.

MemoryStream ms = new MemoryStream(user.Picture.ToArray());
Guid imageGuid = new Guid();
HttpRuntime.Cache.Add(imageGuid.ToString(), ms, null,
    DateTime.Now.AddMinutes(5), Cache.NoSlidingExpiration, CacheItemPriority.Normal, null);

Then use a handler (.ashx) to fetch it out of the cache and send it to the client.

string imageGuid = context.Request.QueryString[image];
MemoryStream ms = (MemoryStream)HttpRuntime.Cache[imageGuid];
// configure context.Response with appropriate content type and cache settings

// ** Edit **
// It seems I need to be more explicit with regard to the above comment:-
context.Response.Cache.SetCacheability(HttpCacheability.Public);
context.Response.Cache.SetLastModified(DateTime.UtcNow);
context.Response.Cache.SetExpires(DateTime.UtcNow.AddHours(2);
context.Response.Cache.SetMaxAge(TimeSpan.FromHours(2));
context.Response.Cache.SetValidUntilExpires(true);

ms.WriteTo(context.Response.OutputStream);

Now you can drop the MemoryStream from the Cache.

HttpRuntime.Cache.Remove(imageGuid);

Method 3

create separate page where you will create image for example: image.aspx
and use it on other pages

<img src="image.aspx?id=number" >

number is id of image in database

Method 4

You need an IHttpHander which will write image bytes and proper Content-Type to a response stream. See this, this and this.

Method 5

I’m pretty sure that you can’t do this in the page itself.

If you don’t want to create a HTTP Handler to output the image then your alternative is to create a separate aspx page. Set the src of your img tag to point at that page, passing some sort of ID in the querystring so that the image data can be pulled from the database.

Having said that, setting up an aspx page to do this is no quicker or easier than setting up an ashx. I would recommend doing this the right way and creating a HTTP Handler.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0