Add image to GridView's Cell - asp.net

Question

I want to add image to GridView cell with below code but doesn't show image
//aspx
<asp:TemplateField HeaderText="image">
<ItemTemplate>
<asp:Image ID="img" runat="server" Width="100px" Height="100px" />
</ItemTemplate>
//.cs -> In page_Load
for (int i = 0; i < GridView1.Rows.Count; i++)
{
Image img = (Image)GridView1.Rows[i].FindControl("img");
img.ImageUrl = path of image;
}//for

Answer 1

You can use RowDataBound event to change something inside a GridView Row.
protected void GridView1_RowDatabound(object sender, GridViewRowEventArgs e)
{
// check if this row is a row with Data (not Header or Footer)
if (e.Row.RowType == DataControlRowType.DataRow)
{
// find your Image control in the Row
Image image = ((Image)e.Row.FindControl("img"));
// set the path of image
img.ImageUrl = "path of image";
}
}
Or you can use a foreach statment to loop in Rows collection and change the path of image. this code could be on the Page_Load event.
foreach(GridViewRow row in GridView1.Rows)
{
// check if this row is a row with Data (not Header or Footer)
if (row.RowType == DataControlRowType.DataRow)
{
// find your Image control in the Row
Image image = ((Image)row.FindControl("img"));
// set the path of image
img.ImageUrl = "path of image";
}
}
Edits
You cannot set the image out of the solution. Do to this, you have to create an Handler (.ashx file) and pass the name of your image on C: and return the a byte[], something like this:
public void ProcessRequest(HttpContext context)
{
byte[] imageBytes = File.ReadAllBytes(#"C:\" + context.Request["image"]);
context.Response.ContentType = "image/png";
context.Response.BinaryWrite(imageBytes);
}
And on your page, set it by handler passing a image parameter in url:
Image image = ((Image)row.FindControl("img"));
img.ImageUrl = "ImageHandler.ashx?image=1.png";

Answer 2

The event Page_Load fires before the GridView databinds or creates itself. If they're all going to be the same image, why not just set that path to in the ItemTemplate? If it's because you don't know the path until you get into the code behind, you could bind the ImageUrl in the template to a custom property and then just set that property in the Page_Load and then populate the property. Otherwise, any changes you want to make will need to be done in the RowDataBound event.

Answer 3

You can directly give path to image from database
<ItemTemplate>
<asp:Image ID="img" runat="server" Width="100px" Height="100px" ImageUrl='<%# Eval("Imageurl") %>' />
</ItemTemplate>
or give url in alt tag and in rowdatabound use it.
if (e.Row.RowType == DataControlRowType.DataRow)
{
Image image1 = ((Image)e.Row.FindControl("img"));
img.ImageUrl = image1.Alt; // You can check for path here if no image found
}
Using loop through gridview is not proper way as well as it decrease the performance