Click here to Skip to main content
Click here to Skip to main content

Auto-bind byte[] to asp:Image

, 23 Aug 2012
Rate this:
Please Sign up or sign in to vote.
Simplest and quickest way to automatically bind array of image bytes to asp:Image object.

Introduction   

This is to show how one can quickly bind an image from a database, which arrives as type byte[], and into asp:Image object on your Web Form.

Background  

Having to bind an image from a database to a Web Form is a very frequent task. In the most common scenario you have the following:

  • You have a column with an image, which arrives as type byte[]
  • You have asp:Image object on your form that needs to show the image; 
  • You use property DataSource and method DataBind() to bind your records to the containing object, be that GridView or ListView or whatever else; 

Most of articles that you can find on the Internet will tell you to use something like this:

<asp:Image ImageUrl='<%# "ShowImage.ashx?id=" + Eval("IMG_ID") %>' />  

And then you would have to create that ShowImage.ashx file where you need to implement IHttpHandler that would use the passed ID of the image, read the image and generate a valid response in the end, one that can be automatically recognized as an image. 

Problems that I had with this approach: 

  1. If I query my data through a stored procedure, I get the complete image on the first request, and I do not want to query for the same image the second time. Ok, there are some cumbersome suggestions out there for implementing the buffering, but it is a complication. 
  2. To implement a whole extra IHttpHandler just to show my JPEG-s sounds like yet another complication, and takes a bit of time.

After much search on the Internet I finally came to the simplest, quickest and most elegant way of achieving exactly what I wanted, and it is explained in the chapter below. 

Using the code

Let's assume we have column [IMG_DATA] that represents our images, and which arrives as type byte[].

Set your image object to the following presentation:

<asp:Image ImageUrl='<%# GetImage(Eval("IMG_DATA")) %>' /> 

Above we tell the ASPX engine that we want to take value of column [IMG_DATA], and pass it into method GetImage of the page, which should return a valid image.  So, let's implement the method inside our page class:

public string GetImage(object img)
{
   return "data:image/jpg;base64," + Convert.ToBase64String((byte[])img);
}

And this is it, we are done! We are simply returning the image as a well-formatted Base64 string, setting the right header of "data:image/jpg;base64,".

And if you want to display other images, like GIF or PNG, then just change the header to "data:image/gif;base64," or "data:image/png;base64," accordingly.

And if you are an ASPX-only hard-coder,  you can use it as shown below:

<asp:Image ImageUrl='<%# "data:image/jpg;base64," + Convert.ToBase64String((byte[])Eval("IMG_DATA")) %>' />   

NOTES

  1. In the examples above, for simplicity I skipped other attributes, like ID and runat, that you will normally use.  
  2. The proposed solution comes at a cost: it increases size of the output HTML with embedded images, and thus must be weighted for each project separately, considering size of images and performance requirements. It makes more sense to use for either a single image or a set of small images. 

Points of Interest   

In my current task I have to use stored procedures from an Oracle database. Some of the procedures return records with images in them, as type Blob, which arrives into .NET layer as type byte[]

Since I already had the image data, while using the standard DataSource and DataBind() methods, it beat me why I couldn't find such a basic information about showing images on a form without using the overhead of a custom IHttpHandler

It took me a number of hours to find the right answer, and once I did find it, the simplicity of it compelled me to publish this tip for others, not to waste time on such a trivial task.

History 

  • August 23, 2012 - Initial Version.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Vitaly Tomilov
Software Developer (Senior) Sibedge IT
Ireland Ireland
My online CV: cv.vitalytomilov.com

Comments and Discussions

 
Question5/5 PinprofessionalHard_Rockz2-Aug-14 18:09 
GeneralThank u PinmemberMember 108914614-Jul-14 1:02 
GeneralRe: Thank u PinpremiumVitaly Tomilov4-Jul-14 1:55 
QuestionThanks this is simplest and quickest Pinmemberashutoshrambhal25-Jun-14 2:05 
AnswerRe: Thanks this is simplest and quickest PinpremiumVitaly Tomilov4-Jul-14 1:55 
GeneralMy vote of 5 PinmemberMohit Arora14-May-14 0:03 
QuestionThanks a lot Pinmembermohsen s13-May-14 4:09 
QuestionThanks its a great way to display image PinmemberNaveedAhmed9-Jan-14 23:34 
GeneralAuto-bind byte to asp:Image PinmemberDale Lanz10-Oct-13 15:35 
GeneralRe: Auto-bind byte to asp:Image PinmemberVitaly Tomilov10-Oct-13 23:51 
GeneralGreat article Pinmembermarc lambert o. agas5-Aug-13 12:03 
GeneralRe: Great article PinmemberVitaly Tomilov5-Aug-13 12:05 
SuggestionImage format PinmemberRichard Deeming27-Feb-13 1:36 
GeneralRe: Image format PinmemberVitaly Tomilov2-Mar-13 8:16 
QuestionThanks PinmemberAnuradha Lakra10-Jan-13 20:52 
GeneralMy vote of 5 Pinmemberrahulkale55558-Dec-12 14:04 
GeneralMy vote of 5 PinmemberMember 849115427-Nov-12 1:02 
GeneralMy vote of 5 PinmemberPrashant0302k428-Aug-12 7:49 
GeneralRe: My vote of 5 PinmemberVitaly Tomilov28-Aug-12 8:01 
GeneralMy vote of 5 Pinmembermbsmbs27-Aug-12 21:14 
GeneralRe: My vote of 5 PinmemberVitaly Tomilov27-Aug-12 22:53 
Questionasp:Image view Pinmemberbsshowriraju000126-Aug-12 19:02 
AnswerRe: asp:Image view PinmemberVitaly Tomilov26-Aug-12 21:39 
GeneralMy vote of 5 PinmemberChristian Amado23-Aug-12 14:51 
GeneralRe: My vote of 5 PinmemberVitaly Tomilov23-Aug-12 21:17 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140827.1 | Last Updated 23 Aug 2012
Article Copyright 2012 by Vitaly Tomilov
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid