In this article I will explain with an example, how to display images in GridView using the path stored in SQL Server database.
The concept behind this technique is to store the images on disk in a folder that resides in the WebSite root directory while the relative path of the images along with FileName is stored in SQL Server database.
 
 
Database
This article makes use of a table named Files whose schema is defined as follows.
Display Images in GridView Control using the path stored in SQL Server database
 
Note: You can download the database table SQL by clicking the download link below.
          Download SQL file
 
 
HTML Markup
The HTML Markup consists of:
FileUpload – For selecting image file.
Button – For uploading selected file.
GridView – For displaying data.
Columns
GridView consists of two BoundField columns and one ImageField column.
ImageField has been assigned with the DataImageUrlField property set to Path i.e. Path stored in the SQL Server database.
DIV – For displaying image in dialog box.
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick = "Upload" />
<hr />
<asp:GridView ID="gvImages" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="FileId" HeaderText="Image Id" />
        <asp:BoundField DataField="Name" HeaderText="Name" />
        <asp:ImageField DataImageUrlField="Path" HeaderText="Image" />
    </Columns>
</asp:GridView>
<div id="dialog" style="display: none">
</div>
 
 
Namespaces
You will need to import the following namespaces.
C#
using System.IO;
using System.Data;
using System.Configuration;
using System.Data.SqlClient;
 
VB.Net
Imports System.IO
Imports System.Data
Imports System.Configuration
Imports System.Data.SqlClient
 
 
Displaying Images using Path stored in database in ASP.Net GridView
Inside the Page Load event handler, the GridView is populated with the records fetched from the SQL Server database table.
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlConnection conn = new SqlConnection(constr))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter("SELECT * FROM Files", conn))
            {
                DataTable dt = new DataTable();
                sda.Fill(dt);
                gvImages.DataSource = dt;
                gvImages.DataBind();
            }
        }
    }
}
 
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
        Using conn As SqlConnection = New SqlConnection(constr)
            Using sda As SqlDataAdapter = New SqlDataAdapter("SELECT * FROM Files", conn)
                Dim dt As DataTable = New DataTable()
                sda.Fill(dt)
                gvImages.DataSource = dt
                gvImages.DataBind()
            End Using
        End Using
    End If
End Sub
 
 
Uploading and saving Image to Folder and the Path in SQL Server database
When Upload button is clicked, the selected image file is saved in the Uploads Folder (Directory) within the Project Folder.
The Name and the Path of the uploaded Image file is inserted into the SQL Server database table.
Finally, the page is redirected to itself.
Note: The Relative Path of the Image file will be saved in the database for ease of conversion to Absolute Path or Absolute URL.
 
C#
protected void Upload(object sender, EventArgs e)
{
    //Extract Image File Name.
    string fileName = Path.GetFileName(FileUpload1.PostedFile.FileName);
 
    //Set the Image File Path.
    string filePath = "~/Uploads/" + fileName;
 
    //Save the Image File in Folder.
    FileUpload1.PostedFile.SaveAs(Server.MapPath(filePath));
 
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection conn = new SqlConnection(constr))
    {
        string sql = "INSERT INTO Files VALUES(@Name, @Path)";
        using (SqlCommand cmd = new SqlCommand(sql, conn))
        {
            cmd.Parameters.AddWithValue("@Name", fileName);
            cmd.Parameters.AddWithValue("@Path", filePath);
            conn.Open();
            cmd.ExecuteNonQuery();
            conn.Close();
        }
    }
 
    Response.Redirect(Request.Url.AbsoluteUri);
}
 
VB.Net
.Protected Sub Upload(ByVal sender As Object, ByVal e As EventArgs)
    'Extract Image File Name.
    Dim fileName As String = Path.GetFileName(FileUpload1.PostedFile.FileName)
 
    'Set the Image File Path.
    Dim filePath As String = "~/Uploads/" & fileName
 
    'Save the Image File in Folder.
    FileUpload1.PostedFile.SaveAs(Server.MapPath(filePath))
 
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using conn As SqlConnection = New SqlConnection(constr)
        Dim sql As String = "INSERT INTO Files VALUES(@Name, @Path)"
        Using cmd As SqlCommand = New SqlCommand(sql, conn)
            cmd.Parameters.AddWithValue("@Name", fileName)
            cmd.Parameters.AddWithValue("@Path", filePath)
            conn.Open()
            cmd.ExecuteNonQuery()
            conn.Close()
        End Using
    End Using
 
    Response.Redirect(Request.Url.AbsoluteUri)
End Sub
 
 
Implement Zoom feature when Image is clicked using jQuery
jQuery Modal Popup will be used to implement zoom feature.
Applying jQuery UI Model Popup plugin
Inside the HTML, the following jQuery UI Model CSS file is inherited.
1. jquery-ui.css
And then, the following the following jQuery UI Model and jQuery JS files are inherited.
1. jquery.min.js
2. jquery-ui.js
 
A jQuery click event handler is assigned to all the HTML Image elements within the GridView.
When an Image element is clicked, the Image element is cloned and displayed in larger size within a jQuery UI Model Popup.
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script  type="text/javascript">
    $(function () {
        $("#dialog").dialog({
            autoOpen: false,
            modal: true,
            height: 600,
            width: 600,
            title: "Zoomed Image"
        });
        $("[id*=gvImages] img").click(function () {
            $('#dialog').html('');
            $('#dialog').append($(this).clone());
            $('#dialog').dialog('open');
        });
    });
</script>
 
 
Screenshots
Uploading and displaying the Image Files
Display Images in GridView Control using the path stored in SQL Server database
 
Inserted records of Image files
 
Display Images in GridView Control using the path stored in SQL Server database
 
 
Downloads
Download Code