Display Images stored as Image in GridView

Suppose we have a table in DB named "Images"
The data inside it are

img_id(int) ---> the id of the image
img_name(varchar(50)) ---> the name given to image
img_data(image) ---> the image stored as bit array
img_contenttype(varchar(20)) ---> like image/png, image/jpeg and all

Our requirement is to show the images in a GridView

Here's the ASPX

<asp:GridView ID="gvwImages" runat="server" 
AutoGenerateColumns="false" 
DataSourceID="dsImages">
<Columns>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<%--field img_name is the name given to image--%>
<asp:Label ID="lblName" runat="server" 
Text='<%#Eval("img_name") %>'>
</asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Image">
<ItemTemplate>
<%--here field img_id is the id of the image--%>
<asp:Image ID="Image1" runat="server" 
ImageUrl='<%# "Handler.ashx?id=" + Eval("img_id") %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="dsImages" runat="server" 
ConnectionString='<%$ConnectionStrings: your conn string %>'
SelectCommand="Select img_id,img_name from Images">
</asp:SqlDataSource>

Here inside ImageUrl we have given Handler.ashx.
Since we dont have one, create one.
Go to Add New Item. select Generic Handler and click OK.

Inside the Handler.ashx, paste this code

using System;
using System.Web;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;

public class Handler : IHttpHandler
{

public bool IsReusable
{
get { return false; }
}
public void ProcessRequest(HttpContext context)
{
SqlConnection myConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["LoginCon"].ConnectionString);
myConnection.Open();
//here field img_data is the content of the image (type image in DB)
//field img_contenttype is the type of the image (optional)
string sql = "Select img_data,img_contenttype from Images where img_id=@ImageId";
SqlCommand cmd = new SqlCommand(sql, myConnection);
cmd.Parameters.Add("@ImageId", SqlDbType.Int).Value = context.Request.QueryString["id"];
cmd.Prepare();
SqlDataReader dr = cmd.ExecuteReader();
dr.Read();
context.Response.ContentType = dr["img_contenttype"].ToString();
context.Response.BinaryWrite((byte[])dr["img_data"]);
}

}

Simple enough right?

Now if you wanna test it do it using Northwind DB.
Take the "Employees" table inside it and try to diplay the field "Photo"
10 out of 10, it wont work in your Page. [:)]
Suprised?
The reason is that the images stored in Northwind DB has OLE Header.
The header length is invariably 78 bytes.
So if we remove the first 78 bytes we can view images from Northwind too.

Here goes the special Handler.ashx for Northwind DB.(Table used ---> Employees)

using System;
using System.Web;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;

public class Handler : IHttpHandler
{

public bool IsReusable
{
get { return false; }
}
public void ProcessRequest(HttpContext context)
{
//context.Response.ContentType = "text/plain";
//context.Response.Write("Hello World");
SqlConnection sqlConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["Northwind"].ConnectionString);
sqlConnection.Open();
string sql = " Select Photo from Employees where EmployeeID=@EmpId";
SqlCommand cmd = new SqlCommand(sql, sqlConnection);
cmd.Parameters.Add("@EmpId", SqlDbType.Int).Value = context.Request.QueryString["id"];
cmd.Prepare();
SqlDataReader dr = cmd.ExecuteReader();
dr.Read();
// Output the binary data
// But first we need to strip out the OLE header
byte[] thePicture = (byte[])dr["Photo"];
const int OleHeaderLength = 78;
int strippedImageLength = thePicture.Length - OleHeaderLength;
byte[] strippedImageData = new byte[strippedImageLength];
Array.Copy(thePicture, OleHeaderLength, strippedImageData, 0, strippedImageLength);
context.Response.BinaryWrite(strippedImageData);
// context.Response.BinaryWrite((byte[])dr["Photo"]);
}

}

Happy Coding!

Related Posts :