How to display image stored as binary BLOB in Grid
If you are seeing this section and do not see download links, this means that you are not logged into our site. If you already are a member, click on the login link
and login into site and come back to this page for downloading the control files. If you are not a member, click on registration link to
become a Winista member and download the control for free.
Some time you run into a situation where images are stored in database as BLOB or binary format and you want
to display those images in your DataGrid or GridView.
Image control requires you to
specify ImageUrl property to specify location of image file. In this case you do not have image file and there
is no way to specify Binary field in ImageField or Image control so that it can render the image. This
article will help answering the following questions.
- How to get BLOB data from database?
- How to get binary data from database?
- How to display BLOB image data in GridView?
- How to display BLOB image data in DataGrid?
You can get the binary data the same way as you do other data types. The following code
snippet from the sample project of this article shows how data has been
obtained from ProductPhots tables from AdventureWorks database.
conn = ConnectionInfo.CreateConnection(strConn, true);
SqlCommand cmd = new SqlCommand("SELECT * FROM PRODUCTION.PRODUCTPHOTO", conn);
SqlDataAdapter sqlDA = new SqlDataAdapter(cmd);
ds = new DataSet("Products_Set");
There are 2 fields, ThumbnailPhoto and LargePhoto, in this table that are defined as
varbinary type in SQL Server 2005 table. In DataSet they will appear
as System.Byte array. There are 2 ways you can show these images in the grid. One is to
save this binary data as files on the disk and then specify ImageUrl for ImageField in
GridView. Or second approach which I would recommend is to stream this binary data
directly into Response.
The following snippet shows how GridView columns have been set in the sample project to
display these images.
<asp:GridView ID="ctlGridView" runat="server" autogeneratecolumns=False>
<asp:boundfield datafield="ProductPhotoID" />
<asp:imagefield headertext="Thumbnail" dataimageurlfield="ProductPhotoID"
<asp:boundfield datafield="ThumbnailPhotoFileName" headertext="Thumbnail File" />
<asp:imagefield HeaderText="Large Photo" dataimageurlfield="ProductPhotoID"
<asp:BoundField DataField="LargePhotoFileName" HeaderText="Large Photo File" />
Notice the values specified in DataImageUrlField and DataImageUrlFormatString
Asp:ImageField columns. DataImageUrlFormatString I am using URL
of another ASPX page as image url. That page GridImageTemplate.aspx is the one that
does the job of streaming the binary data directly into the response. Implementation of that
template page, extracts the binary data for the images from DataSet based on the values
specified in query string and writes that data into Response.OutputStream. Following code
shows implementation in the sample project.
private void StreamImageIntoResponse(DataRow drow, Boolean isThumbnail)
if (null == drow)
Byte  bytes = null;
bytes = (Byte)drow["ThumbnailPhoto"];
bytes = (Byte)drow["LargePhoto"];
Response.OutputStream.Write(bytes, 0, bytes.Length);
Download the sample project of this article and see how it works.