Click here to Skip to main content
14,602,124 members
Rate this:
Please Sign up or sign in to vote.
See more:
I am using the grid view control to load the image from the database.
I am using an Item Template inside a grid view control. However a wrong url is formed ie. /Image/System.byte[] when binding it to the image control. The datatype of the image
is image in the database.
System.byte[] is the data I am getting when getting the image of the product. I do not want to use any handler for the same.
How do I bind the image to the image control . This is my code.

What I have tried:

The following is the .aspx code
 <asp:TableRow ID="imagerow" runat="server">
    <asp:TableCell>
         <asp:Image ID="productimage" runat="server"
         ImageUrl='<%# Eval("ProductImage","~/Image/{0}") %>'Height="30px" Width="40px" />
    </asp:TableCell>
 </asp:TableRow>


The following is the .cs code

    try
    {
       using (SqlConnection connect = new SqlConnection(cs))
       {
          using (SqlCommand scmd = new SqlCommand("SELECT  * FROM Products", connect))
          {
               using (SqlDataAdapter da = new SqlDataAdapter(scmd))
               {
                   using (DataSet ds = new DataSet())
                   {
                                connect.Open();
                                da.Fill(ds);
                                gridviewproducts.DataSource = ds;
                                gridviewproducts.DataBind();
                                connect.Close();
                   }
               }
           }
       }
    }
    catch (Exception ex)
    {
        Console.WriteLine(ex.Message);
    }
Posted
Updated 30-Jul-20 16:38pm

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

You need to convert the byte array into image during RowDataBound. Something like:
protected void grd_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if(e.Row.RowType==DataControlRowType.DataRow)
        {
            System.Web.UI.HtmlControls.HtmlImage imageControl = (System.Web.UI.HtmlControls.HtmlImage)e.Row.FindControl("imageControl");
            if (((DataRowView)e.Row.DataItem)["imagedata"] != DBNull.Value)
            {
                imageControl.Src = "data:image/png;base64," + Convert.ToBase64String((byte[])(((DataRowView)e.Row.DataItem))["imagedata"]);
            }
        }
    }

Here, have a look:
Display images from SQL Server Database in ASP.Net GridView control[^]

UPDATE:
<asp:GridView runat="server"  ID="grd" OnRowDataBound ="grd_RowDataBound"  >
                <Columns>
                    <asp:TemplateField HeaderText="image">
                        <ItemTemplate>
                          <img src='<%# Eval("imagedata") %>' id="imageControl" runat="server" />
                        </ItemTemplate>   
                    </asp:TemplateField> 
                </Columns>
            </asp:GridView>
   
v4
Comments
Member 14872744 31-Jul-20 2:16am
   
<asp:tablerow id="imagerow" runat="server">
<asp:tablecell>
<asp:image id="productimage" runat="server"
="" imageurl="<%#"data:Image/png;base64," + Convert.ToBase64String((byte[])Eval("ProductImage")) %>" height="30px" width="40px">



I have done this... but still it isnt showing my image. Using the developer tool, when I check the source of the image i get the following link src="data:Image/png;base64,flxJbWFnZVxrYWphbC5qcGc="

I am not able to find out where am I going wrong
Sandeep Mewara 31-Jul-20 2:30am
   
Updated the ASPX sample
Member 14872744 31-Jul-20 3:54am
   
Still the image is not visible image src formed is
and the image is not available at this url.. what do I do ?
Sandeep Mewara 31-Jul-20 4:19am
   
All I can say is to troubleshoot/debug yourself or find someone who can debug with you. Above sample works, you need to see thats causing it not to.
Member 14872744 31-Jul-20 5:51am
   
Thanks a lot Sir, I made a mistake in my database. I rectified and that worked

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




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100