Display image in gridview in asp.net

Question

I am not sure what I am doing wrong. I am trying to display the images on the page, it will display the url but not the image. I tried both as a template field and also as an imagefield. With Firebug I can see the value of the image source.

aspx page:

 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ImageID" DataSourceID="Images">
    <Columns>
        <asp:BoundField DataField="ImageID" HeaderText="ImageID" InsertVisible="False" ReadOnly="True" SortExpression="ImageID" />
        <asp:BoundField DataField="InciID" HeaderText="InciID" SortExpression="InciID" />
        <asp:TemplateField HeaderText="Imagepath" SortExpression="Imagepath">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Imagepath") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:image runat="server" ID="Label1" ImageUrl='<%# Bind("Imagepath") %>'></asp:image>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="ImageDescription" HeaderText="ImageDescription" SortExpression="ImageDescription" />
        <asp:BoundField DataField="Category" HeaderText="Category" SortExpression="Category" />
        <asp:ImageField DataImageUrlField="Imagepath">
            <ControlStyle Height="100px" Width="100px" />
        </asp:ImageField>
    </Columns>
</asp:GridView>

Source code of the webpage from Firebug:

<td><img id="ctl00_ContentPlaceHolder1_GridView1_ctl15_Label1" src="images\curiouskids.jpg"></td>
<td><img style="height:100px;width:100px;" src="images\curiouskids.jpg"></td>

Have you verified that `images\curiouskids.jpg` exists and is at the correct path relative to your page? — mason, Feb 05 '14 at 21:27
Trying prepending this to the image url "~\". Something like "~\images\curiouskids.jpg". — Praveen, Feb 05 '14 at 21:29
@msm&bball - The image does exits. @Praveen - tilda works but the slashes needs to foward facing — Nita, Feb 06 '14 at 11:18

score 2 · Answer 1 · answered Feb 05 '14 at 22:07

2

All of your slashes should be forward slashes for URLs.

images/curiouskids.jpg

answered Feb 05 '14 at 22:07

Dave Mroz

1,509
2
14
27

Thanks Dave, putting the forward slash made a difference. However it pulled only the images which were in the"images" folder but not in a folder in C drive. – Nita Feb 06 '14 at 11:17
Makes sense. The images will need to be part of the site in order for them to be accessible to the user. – Dave Mroz Feb 06 '14 at 13:50
Thanks Dave. I used repeater in my other project where I was able to build the path url to the server where the images are stored. – Nita Feb 06 '14 at 16:22

score 1 · Answer 2 · answered Feb 06 '14 at 01:12

1

I agree with Dave and Praveen.

slashes need to be forward slashes and you should try to prepend with ~/.

answered Feb 06 '14 at 01:12

Guy Nethery

299
1
7

score 0 · Answer 3 · answered Feb 06 '14 at 16:20

Thank you guys. I took your suggestion and modified it as written in the code below. Now I have a thumbnail of 100x100 and underneath that I have the text "Enlarged View" and clicking on this will open the full image in a new window. I added tilda and front slash in the code here and removed it from code behind upload.

<asp:TemplateField>
      <EditItemTemplate>
           <asp:TextBox ID="TextBox2" runat="server" Text='<%# Eval("Imagepath") %>'></asp:TextBox>
      </EditItemTemplate>
       <ItemTemplate>
            <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("Imagepath", "~/images/{0}") %>' Width="150px" Height="150px" /><br />
             <asp:HyperLink ID="HyperLink1" runat="server" Text="Enlarged view" Target="_blank"  NavigateUrl='<%# String.Format("~/images/{0}", Eval("Imagepath"))%>' />
       </ItemTemplate>
 </asp:TemplateField>

Display image in gridview in asp.net

3 Answers3