Click here to Skip to main content
11,481,838 members (65,325 online)
Click here to Skip to main content

Auto-bind byte[] to asp:Image

, 23 Aug 2012 CPOL 35.4K 17
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 Pin
Hard_Rockz2-Aug-14 19:09
professionalHard_Rockz2-Aug-14 19:09 
GeneralThank u Pin
Member 108914614-Jul-14 2:02
memberMember 108914614-Jul-14 2:02 
GeneralRe: Thank u Pin
Vitaly Tomilov4-Jul-14 2:55
memberVitaly Tomilov4-Jul-14 2:55 
QuestionThanks this is simplest and quickest Pin
ashutoshrambhal25-Jun-14 3:05
memberashutoshrambhal25-Jun-14 3:05 
AnswerRe: Thanks this is simplest and quickest Pin
Vitaly Tomilov4-Jul-14 2:55
memberVitaly Tomilov4-Jul-14 2:55 
GeneralMy vote of 5 Pin
Mohit Arora14-May-14 1:03
memberMohit Arora14-May-14 1:03 
QuestionThanks a lot Pin
mohsen s13-May-14 5:09
membermohsen s13-May-14 5:09 
QuestionThanks its a great way to display image Pin
NaveedAhmed10-Jan-14 0:34
memberNaveedAhmed10-Jan-14 0:34 
GeneralAuto-bind byte to asp:Image Pin
Dale Lanz10-Oct-13 16:35
memberDale Lanz10-Oct-13 16:35 
GeneralRe: Auto-bind byte to asp:Image Pin
Vitaly Tomilov11-Oct-13 0:51
memberVitaly Tomilov11-Oct-13 0:51 
GeneralGreat article Pin
marc lambert o. agas5-Aug-13 13:03
membermarc lambert o. agas5-Aug-13 13:03 
GeneralRe: Great article Pin
Vitaly Tomilov5-Aug-13 13:05
memberVitaly Tomilov5-Aug-13 13:05 
SuggestionImage format Pin
Richard Deeming27-Feb-13 2:36
memberRichard Deeming27-Feb-13 2:36 
GeneralRe: Image format Pin
Vitaly Tomilov2-Mar-13 9:16
memberVitaly Tomilov2-Mar-13 9:16 
QuestionThanks Pin
Anuradha Lakra10-Jan-13 21:52
memberAnuradha Lakra10-Jan-13 21:52 
GeneralMy vote of 5 Pin
rahulkale55558-Dec-12 15:04
memberrahulkale55558-Dec-12 15:04 
GeneralMy vote of 5 Pin
Member 849115427-Nov-12 2:02
memberMember 849115427-Nov-12 2:02 
GeneralMy vote of 5 Pin
Prashant0302k428-Aug-12 8:49
memberPrashant0302k428-Aug-12 8:49 
GeneralRe: My vote of 5 Pin
Vitaly Tomilov28-Aug-12 9:01
memberVitaly Tomilov28-Aug-12 9:01 
GeneralMy vote of 5 Pin
mbsmbs27-Aug-12 22:14
membermbsmbs27-Aug-12 22:14 
GeneralRe: My vote of 5 Pin
Vitaly Tomilov27-Aug-12 23:53
memberVitaly Tomilov27-Aug-12 23:53 
Questionasp:Image view Pin
bsshowriraju000126-Aug-12 20:02
memberbsshowriraju000126-Aug-12 20:02 
AnswerRe: asp:Image view Pin
Vitaly Tomilov26-Aug-12 22:39
memberVitaly Tomilov26-Aug-12 22:39 
GeneralMy vote of 5 Pin
Christian Amado23-Aug-12 15:51
memberChristian Amado23-Aug-12 15:51 
GeneralRe: My vote of 5 Pin
Vitaly Tomilov23-Aug-12 22:17
memberVitaly Tomilov23-Aug-12 22: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 | Terms of Use | Mobile
Web03 | 2.8.150520.1 | Last Updated 23 Aug 2012
Article Copyright 2012 by Vitaly Tomilov
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid