Display Images from Database using ASP.Net
Author:Mudassar Khan
In my previous article I explained Save and Retrieve Files from SQL Server Database using ASP.Net.
Here I will explain how to display images that are saved in database.
I have saved images of three different formats i.e. JPEG, GIF and PNG in the Database.
Refer figure below.
Retreive the Images
To retreive pictures from database I have created a Picture Page. The page will receive ImageID as the ID of the Saved image as QueryString Parameter.
Based on the QueryString Parameter, the page will retreive the image and write it to the Response. Refer the Code Below
C# [ImageCSharp.aspx]
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["ImageID"] != null)
{
string strQuery = "select Name, ContentType, Data from tblFiles where id=@id";
SqlCommand cmd = new SqlCommand(strQuery);
cmd.Parameters.Add("@id", SqlDbType.Int).Value
= Convert.ToInt32 (Request.QueryString["ImageID"]);
DataTable dt = GetData(cmd);
if (dt != null)
{
Byte[] bytes = (Byte[])dt.Rows[0]["Data"];
Response.Buffer = true;
Response.Charset = "";
Response.Cache.SetCacheability(HttpCacheability.NoCache);
Response.ContentType = dt.Rows[0]["ContentType"].ToString();
Response.AddHeader("content-disposition", "attachment;filename="
+ dt.Rows[0]["Name"].ToString());
Response.BinaryWrite(bytes);
Response.Flush();
Response.End();
}
}
}
VB.Net [ImageVB.aspx]
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
Handles Me.Load
If Request.QueryString("ImageID") IsNot Nothing Then
Dim strQuery As String = "select Name, ContentType, Data from tblFiles where id=@id"
Dim cmd As SqlCommand = New SqlCommand(strQuery)
cmd.Parameters.Add("@id", SqlDbType.Int).Value
= Convert.ToInt32(Request.QueryString("ImageID"))
Dim dt As DataTable = GetData(cmd)
If dt IsNot Nothing Then
Dim bytes() As Byte = CType(dt.Rows(0)("Data"), Byte())
Response.Buffer = True
Response.Charset = ""
Response.Cache.SetCacheability(HttpCacheability.NoCache)
Response.ContentType = dt.Rows(0)("ContentType").ToString()
Response.AddHeader("content-disposition", "attachment;filename="
+ dt.Rows(0)("Name").ToString())
Response.BinaryWrite(bytes)
Response.Flush()
Response.End()
End If
End If
End Sub
The function GetData is used to get data from the Database. To find out how it is done refer here.
Display Images
To Display the image on the aspx page I have used ASP.Net Image Control refer below.
<asp:image ID="Image1" runat="server" ImageUrl ="ImageCSharp.aspx?ImageID=1"/>
<asp:image ID="Image2" runat="server" ImageUrl ="ImageCSharp.aspx?ImageID=2"/>
<asp:image ID="Image3" runat="server" ImageUrl ="ImageCSharp.aspx?ImageID=3"/>
<asp:image ID="Image1" runat="server" ImageUrl ="ImageVB.aspx?ImageID=1"/>
<asp:image ID="Image2" runat="server" ImageUrl ="ImageVB.aspx?ImageID=2"/>
<asp:image ID="Image3" runat="server" ImageUrl ="ImageVB.aspx?ImageID=3"/>
As you will notice above I am passing URL of the ImageCSharp.aspx (C# Version) and the ImageVB.aspx
(VB.Net Version) which accepts the ImageID as the QueryString Parameter.
The figure below displays the how the Images are displayed.
The complete source code is available with database here
DisplayImagesFromDB.zip (2.67 mb)