Click here to Skip to main content
13,402,659 members (39,409 online)
Click here to Skip to main content
Add your own
alternative version


53 bookmarked
Posted 7 Oct 2007

Displaying Images from a Database in a GridView

, 9 Dec 2010
Rate this:
Please Sign up or sign in to vote.
A simple guide for beginners, explaining one method of displaying images taken from a database on a GridView inside an ASP.NET web page


This is a simple web application for users who are new to ASP.NET. This will show how we can retrieve an image from a database and display it in a GridView.

Screenshot - Output


Sometimes we need to upload images to a web application and store it in a database, which store images in binary format. Since that can cause a loss of image quality, we can instead store the image path in the database, and retrieve that image path from it, and display the image from that location in the web page.

In order to do this, first we need to use ADO.NET to connect to the database. The database I use here is SQL Server.

Screenshot - Database

In the database shown, the Profile_Picture field contains the image path. In my case, I have stored all my images in the application directory. You may change this to any other directory, like ~\myfolder\myimage.jpg.

Now our application reads images from its current directory, so if you use a different folder from the current directory, you have to set the application's current directory by calling Directory.SetCurrentDirectory, of the System.IO namespace.

We also need to set some properties in the GridView .

Screenshot - GridView properties

Perform the following actions:

  1. Uncheck the Auto-generate field
  2. Use two BoundFields for UserName and Country
  3. Set the Header Text and DataField (field name in database)
  4. Use ImageField for the image and set DataImageUrlField = ImageFieldName
  5. Click OK

Using the code

The code required for the explanation above is very simple.

public partial class _Default : System.Web.UI.Page 
    SqlConnection conn = new SqlConnection();
    protected void Page_Load(object sender, EventArgs e)
            = "Data Source=MyServer; Integrated Security=True; database=test";
        Load_GridData(); // call method below

    void Load_GridData()
        conn.Open();  // open the connection 
        SqlDataAdapter Sqa = new SqlDataAdapter("select * from picture", conn);
        DataSet ds = new DataSet();
        Sqa.Fill(ds);   // fill the dataset 
        GridView1.DataSource = ds; // give data to GridView

Points of Interest

Using images in your web application is always interesting, and after all, they are from a database!


First published7 Oct 2007
Edited10 Dec 2010


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Abhijit Jana
Technical Lead
India India
.NET Consultant | Former Microsoft MVP - ASP.NET | CodeProject MVP, Mentor, Insiders| Technology Evangelist | Author | Speaker | Geek | Blogger | Husband

Blog :
Web Site :
Twitter : @AbhijitJana
My Kinect Book : Kinect for Windows SDK Programming Guide

You may also be interested in...

Comments and Discussions

GeneralHelpful , thanks Pin
EmanuelArpaIT27-Mar-17 0:48
memberEmanuelArpaIT27-Mar-17 0:48 
QuestionExcellent Pin
khaliqhamid21-Jul-14 0:39
memberkhaliqhamid21-Jul-14 0:39 
GeneralMy vote of 1 Pin
R koyee2-Apr-13 16:52
memberR koyee2-Apr-13 16:52 
GeneralMy vote of 5 Pin
Gladys Merma Molina20-Mar-13 20:28
memberGladys Merma Molina20-Mar-13 20:28 
QuestionPage reload Error Pin
Dhanashree Dive20-Jan-13 20:20
memberDhanashree Dive20-Jan-13 20:20 
GeneralRegarding Video Conferencing Pin
Praneshprakash21-Dec-12 19:19
memberPraneshprakash21-Dec-12 19:19 
GeneralMy vote of 5 Pin
sagar pathe18-May-12 3:58
membersagar pathe18-May-12 3:58 
AnswerThanks Abhijit Jana Pin
mohanjune198726-Apr-12 4:28
membermohanjune198726-Apr-12 4:28 
GeneralMy vote of 5 Pin
sau735-Apr-12 11:50
membersau735-Apr-12 11:50 
GeneralMy vote of 5 Pin
pashad11-Mar-12 21:47
memberpashad11-Mar-12 21:47 
GeneralRe: My vote of 5 Pin
amit_jain_online28-Mar-12 2:54
memberamit_jain_online28-Mar-12 2:54 
GeneralMy vote of 3 Pin
Tarika Joshi14-Sep-11 20:35
memberTarika Joshi14-Sep-11 20:35 
GeneralMy vote of 5 Pin
parveen_gkv12-Dec-10 3:00
memberparveen_gkv12-Dec-10 3:00 
GeneralMy vote of 2 Pin
Chona11719-Dec-10 23:52
memberChona11719-Dec-10 23:52 
GeneralRe: My vote of 2 Pin
Abhijit Jana10-Dec-10 1:21
mvpAbhijit Jana10-Dec-10 1:21 
GeneralRe: My vote of 2 Pin
Chona117110-Dec-10 2:08
memberChona117110-Dec-10 2:08 
GeneralRe: My vote of 2 Pin
Noman Aftab11-Dec-10 8:08
memberNoman Aftab11-Dec-10 8:08 
GeneralMy vote of 1 Pin
yunusatm9-Dec-10 20:37
memberyunusatm9-Dec-10 20:37 
GeneralRe: My vote of 1 Pin
Indivara9-Dec-10 20:51
subeditorIndivara9-Dec-10 20:51 
GeneralMy vote of 3 Pin
SChristmas27-Nov-10 5:47
memberSChristmas27-Nov-10 5:47 
GeneralRe: My vote of 3 Pin
Abhijit Jana10-Dec-10 1:23
mvpAbhijit Jana10-Dec-10 1:23 
Generalhelp Pin
hitesh jariwala25-Mar-10 3:23
memberhitesh jariwala25-Mar-10 3:23 
AnswerRe: help Pin
Abhijit Jana27-Aug-10 9:20
mvpAbhijit Jana27-Aug-10 9:20 
GeneralMy vote of 1 Pin
Ali Saeedi3-Feb-10 0:32
memberAli Saeedi3-Feb-10 0:32 
GeneralRe: My vote of 1 Pin
Abhijit Jana27-Aug-10 9:19
mvpAbhijit Jana27-Aug-10 9:19 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.180218.2 | Last Updated 10 Dec 2010
Article Copyright 2007 by Abhijit Jana
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid