Using gridview to display images works locally but not on server

Question

I am attempting to display some images that I have stored in my project folder images/bookjackets.

Project Folder Layout:

    images/bookjacket/*images.jpg*
    Default.aspx
    Default.aspx.cs

Here is the gridview code involved:

<asp:GridView ID="gvCatalog" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:ImageField DataImageUrlField="Path">
</asp:ImageField>
<asp:TemplateField>
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Eval("Path") %>'>    
</asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("Path") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Path" HeaderText="Path" />
</Columns>
</asp:GridView>

An example of the path I am sending in looks like this:

    ~/images/bookjackets/9780316407014.jpg

On my server I get the little blue "image" icon. Server Image

On my local host all seems fine. (Both the imageField and the templateField show the picture. Local view

According to the research (having looked all over the web) this should work.

Answer 1

Inspect your html in firebug or chrome(developer tool) and try put ./ instead of ~/ in image path location, it also depends on the location of your image folder.

./ represent parent directory where ../ represent parent of parent.

here is a detailed answer: What does a dot mean in a URL path? .

Answer 2

You can try change your path ...

./images/bookjackets/9780316407014.jpg

OR

../images/bookjackets/9780316407014.jpg

OR

Direct

/images/bookjackets/9780316407014.jpg

OR

~/images/bookjackets/9780316407014.jpg

Answer 3

The answer!

I hope this helps others. You have to place the images folder in the same folder that contains App_Data and App_Code on the production server (Root Level). In addition, you need to add a Web.config file inside the images folder.

<?xml version="1.0"?>
<configuration>
    <location path="images">
        <system.web>
            <authorization>
                <allow users="*"/>
            </authorization>
        </system.web>
    </location>  
</configuration>

You can use this for several websites if you place individual images in a unique sub-folder to images (as I did in \\bookjackets).