How to show images in ASP.NET GridView from Image Path

  • by gridview images table

In this post we will see how to display images in gridview from image path stored in ms sql database table column. Also see How to make Registration Form in ASP.NET and MS SQL Database.

Images in ASP.NET Gridview can be displayed0 using ImageField. Gridview’s ImageField uses “DataImageUrlField” data to display images on the UI.

Download Source code for Display Images in ASP.NET GridView

How to show images in ASP.NET GridView from Image Path:

Below is the design page:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Employees.aspx.cs" Inherits="RegistrationForms.Employees" %>

<!DOCTYPE html>

<html xmlns="">
<head runat="server">
<link href="css/bootstrap.min.css" rel="stylesheet" />
.borderless td, .borderless th {
border: none;
border-color: Red;

.table-condensed > thead > tr > th, .table-condensed > tbody > tr > th, .table-condensed > tfoot > tr > th, .table-condensed > thead > tr > td, .table-condensed > tbody > tr > td, .table-condensed > tfoot > tr > td {
padding: 3px;

input, select {
border-radius: 3px;
padding: 1px;
border: 1px solid darkgray;

.btnCoral {
background-color: crimson;
color: #fff;

body {
width: 100%;
height: 100%;

<form id="form1" runat="server">

<div class="parent-container">
<h2> &nbsp;&nbsp;ASP.NET Gridview with Images from Database.</h2>
<div class="container">
<asp:Button CssClass="btn-danger" Text=" Fill " runat="server" ID="btnFill" OnClick="btnFill_Click" />
<br /><br />
<asp:GridView runat="server" ID="dataEmployees" AutoGenerateColumns="false" UseAccessibleHeader="true"
<asp:ImageField DataImageUrlField="ProfilePic" HeaderText="Profile Picture"
ControlStyle-Width="150" ItemStyle-Width="150"
ControlStyle-Height="150" ItemStyle-Height="150" />
<asp:BoundField DataField="EId" HeaderText="Employee ID" />
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:BoundField DataField="Country" HeaderText="Country" />
<br />
<asp:Label runat="server" ID="lblInfo" />
</html> gridview images table
And its code file:

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

namespace RegistrationForms
public partial class Employees : System.Web.UI.Page
SqlConnection con;
SqlCommand cmd;
SqlDataAdapter adapter;
SqlDataReader reader;
DataSet ds;
DataTable dt;

protected void Page_Load(object sender, EventArgs e)


protected void btnFill_Click(object sender, EventArgs e)
con = new SqlConnection(ConfigurationManager.ConnectionStrings["connectionstring"].ConnectionString);
cmd = new SqlCommand("Select * from View_Emp", con);
adapter = new SqlDataAdapter(cmd);
dt = new DataTable();
dataEmployees.DataSource = dt;
catch (Exception ex)
lblInfo.Text = ex.Message.ToString();

Database Table Pic: gridview images database

Download Source code for Display Images in ASP.NET GridView

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.