In this article I will explain with an example, how to display images from SQL Server database using ASP.Net.
The images stored as Binary data will be fetched as BYTE Array and then the BYTE Array will be converted to BASE64 string and then assigned to the ASP.Net image control.
Note: For more details on how to save files as binary data in database, please refer my article Save Files to SQL Server Database using FileUpload Control.
 
 
Database
This article makes use of a table named tblFiles whose schema is defined as follows.
Display image from database in Image control without using Generic Handler in ASP.Net
 
Binary Images stored in Database
The following screenshot displays database table with three images stored in it.
Display image from database in Image control without using Generic Handler in ASP.Net
 
 
HTML Markup
The HTML Markup consists of:
DropDownList – For capturing Name of the image to be displayed.
Image – For displaying selected image.
 
DropDownList has been assigned with the following properties and event handlers:
Properties
AutoPostBack – For allowing controls submit the Form (PostBack) which cannot submit on their own.
 
Events
OnSelectedIndexChanged – For displaying Images from Database.
<span>Select Image: </span>
<asp:DropDownList runat="server" ID="ddlImages" AppendDataBoundItems="false" AutoPostBack="true" OnSelectedIndexChanged="FetchImage">
    <asp:ListItem Text="Select Image" Value="0"/>
</asp:DropDownList>
<hr/>
<asp:Image runat="server" ID="Image1" Visible="false" Height="60" Width="60" />
 
 
Namespaces
You will need to import the following namespaces.
C#
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
 
VB.Net
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
 
 
Populating the list of Images in DropDownList control
Inside the Page Load event handler, using GetData method the Id and Name of the Image file is fetched from SQL Server database.
The Id and Name of the Image file is set to the DataTextField and DataValueField property of DropDownList respectively and DropDownList will be populated.
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        ddlImages.DataSource = GetData("SELECT Id, Name FROM tblFiles");
        ddlImages.DataTextField = "Name";
        ddlImages.DataValueField = "Id";
        ddlImages.DataBind();
    }
}
 
private DataTable GetData(string query)
{
    DataTable dt = new DataTable();
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlDataAdapter sda = new SqlDataAdapter())
        {
            sda.Fill(dt);
        }
        return dt;
    }
}
 
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        ddlImages.DataSource = GetData("SELECT Id, Name FROM tblFiles")
        ddlImages.DataTextField = "Name"
        ddlImages.DataValueField = "Id"
        ddlImages.DataBind()
         End If
End Sub
 
Private Function GetData(query As String) As DataTable
    Dim dt As New DataTable()
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As New SqlConnection(constr)
        Using sda As New SqlDataAdapter(query, con)
            sda.Fill(dt)
        End Using
        Return dt
    End Using
End Function
 
 
Displaying Images from Database in ASP.Net
When an Image is selected in DropDownList, first the Image control is made visible and then the Binary Data of the Image is fetched from Database as BYTE Array which is later converted to BASE64 string.
Finally, the BASE64 string is set to the ImageUrl property of the Image control and the Image will be displayed.
Note: For more details on how to display binary image using BASE64 string, please refer my article Display Byte Array as Image without using generic handler in ASP.Net.
 
C#
protected void FetchImage(object sender, EventArgs e)
{
    string id = ddlImages.SelectedItem.Value;
    Image1.Visible = id != "0";
    if (id != "0")
    {
        byte[] bytes = (byte[])GetData("SELECT Data FROM tblFiles WHERE Id =" + id).Rows[0]["Data"];
        string base64String = Convert.ToBase64String(bytes, 0, bytes.Length);
        Image1.ImageUrl = "data:image/png;base64," + base64String;
    }
}
 
VB.Net
Protected Sub FetchImage(sender As Object, e As EventArgs)
    Dim id As String = ddlImages.SelectedItem.Value
    Image1.Visible = id <> "0"
    If id <> "0" Then
        Dim bytes As Byte() = DirectCast(GetData(Convert.ToString("SELECT Data FROM tblFiles WHERE Id =") & id).Rows(0)("Data"), Byte())
        Dim base64String As String = Convert.ToBase64String(bytes, 0, bytes.Length)
        Image1.ImageUrl = Convert.ToString("data:image/png;base64,") & base64String
    End If
End Sub
 
 
Screenshot
Display image from database in Image control without using Generic Handler in ASP.Net
 
 
Demo
View Demo
 
 
Downloads