Displaying Images in a GridView

I have been receiving a lot of emails asking how can I display an image into one of the column of the GridView control. In this article I will show you that how easy it is to display the images into the GridView column.

Introduction:

Setting up the Database Table:

Check out the image below to have a better idea of the database table.

As, you can see that I have use the relative path instead of the actual physical path of the images. All the images are stored inside the Images directory which is contained inside the application virtual directory. Hence, the path of the images might look something like /MyApplication/Images/Image1.jpg.

Populating the GridView Control:

The next step is to populate the GridView control with data as well as images. Take a look at the code below which is used to populate the GridView.

private void BindData()

{

SqlConnection myConnection = new SqlConnection(ConnectionString);

SqlDataAdapter ad = new SqlDataAdapter("SELECT UserID, FirstName, LastName,Url FROM Users", myConnection);

DataSet ds = new DataSet();

ad.Fill(ds);

GridView1.DataSource = ds;

GridView1.DataBind();

}

As, you can see the above code is pretty straight forward and you might have done this thousand of times. Now, let's see how we can display the images into the GridView control.

Display Images into the GridView Control:

The first thing you need to do is to add a template column in the GridView control. Once, you have added the template column simply add an Image server control inside the template column. The HTML code of the GridView will look something like the following code:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" BackColor="White" BorderColor="#CC9966" BorderStyle="None" BorderWidth="1px" CellPadding="4">

<asp:BoundField DataField="UserID" HeaderText="UserID" />

<asp:BoundField DataField="FirstName" HeaderText="First Name" />

<asp:TemplateField HeaderText="Image">

<asp:Image ID="Image1" ImageUrl='<%# (string) FormatImageUrl( (string) Eval("Url")) %>' runat="server" />

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

I have made the Image tag bold in the above code so you will easily identify it. Next thing we need to see is the purpose of the FormatImageUrl method which is used to assign the correct url to the ImageUrl property of the Image control.

protected string FormatImageUrl(string url)

{

if (url != null && url.Length > 0)

return ("~/" + url);

else return null;

}

The purpose of "~/" is to map the url relative to the root. This means that the Image control will look for the ImageUrl starting from the root of the website.

Now, if you run your application provided that there are images in the directory which you are using you will see image column in the GridView control just like shown below:

Please feel free to download the the source code at the end of this article.

I hope you liked the article! happy coding.