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");
sqlDA.Fill(ds);							
							

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>
    <columns>
        <asp:boundfield datafield="ProductPhotoID" />
        <asp:imagefield headertext="Thumbnail" dataimageurlfield="ProductPhotoID"
         dataimageurlformatstring='~/GridImageTemplate.aspx?_photo_id_={0}&_photo_large_=0'>
         </asp:imagefield>
        <asp:boundfield datafield="ThumbnailPhotoFileName" headertext="Thumbnail File" />
        <asp:imagefield HeaderText="Large Photo" dataimageurlfield="ProductPhotoID"
         dataimageurlformatstring='~/GridImageTemplate.aspx?_photo_id_={0}&_photo_large_=1'>
         </asp:imagefield>
        <asp:BoundField DataField="LargePhotoFileName" HeaderText="Large Photo File" />
    </columns>
</asp:GridView>							
							

Notice the values specified in DataImageUrlField and DataImageUrlFormatString properties of 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)
    {
        return;
    }

    Byte [] bytes = null;
    if (isThumbnail)
    {
        bytes = (Byte[])drow["ThumbnailPhoto"];
    }
    else
    {
         bytes = (Byte[])drow["LargePhoto"];
    }
    Response.OutputStream.Write(bytes, 0, bytes.Length);
}							
							

Download the sample project of this article and see how it works.