Images that are in App_Data folder not shown in browser

Question

When I set image URL property to asp image control that is in App_Data folder, image is showing in page design view but not in browser.

<form id="form1" runat="server">
<div>
    <asp:Image ID="Image1" runat="server" ImageUrl="~/App_Data/p3.jpg" />
</div>
</form>

It seems to be straightforward, but it's not showing the image.

Answer 1

The App_Data folder is a special folder reserved for data such as database files and so on, and will NOT render out any contents on the web. This is by design, and intentional and cannot be changed (as far as I know).

Your images do definitely not belong into the App_Data subfolder - put them into a /images folder or something more appropriate.

Answer 2

Images should never be stored in the App_Data Folder. This is reserved for files that should never be served to the user directly, such as .mdb database files, etc.

I would create a /Resources or /Resources/Images folder off the root of the site.

Answer 3

I disagree. When hiding images in the App_Data folder and creating your own http-handler you secure your images and can add copyright-text etc. on the images before you show them.

I do this when I have highres pictures i don't wan't everybody to get, and having the http-handler downscale the image and put on some copyrighttext. Great!

Answer 4

Okay, time to do the impossible... While you cannot load images directly from the app_data folder, you can write your own http handler which will read the image file from the app_data folder and send it back to the client. It would be a work-around but in general, the data is meant for data that only your application can read. By having a handler reading the data, you can still return those images.

But it's bad practice and if you'd be working for me, you'd be fired immediately!!!

Answer 5

It depends! ;)

There are good reasons for saving images in App_Data . In situations where your users can upload their files or logos it will protect these files and not make them accessible to other users or being public.

Most important, it's the only way having different files per server/deployment instance.

When deploying your app you can protect these files uploaded by users per server instance by enabling "Exclude files from App_Data" in your deployment configuration.

If you want to access these files by url use a download handler, downloadfile.ashx for instance.

Hope this helps.

Answer 6

Contents from App_Data folder can be served but not directly.
It is intentional.

however adding a virtual path can do this. See this question

I think top three answer serves your purpose.
Store images in resource folder either global or local these are also special folders and contents can be accessed programaticaly.

Answer 7

public string ReturnImage(){
 
alternatively if you wanted to pass a param.

so for example

int WhatEverId = 5;

String folderPath = string.empty;
HostingEnvironment.MapPath("~/App_Data/YourFolder") + @"\" +WhatEverId.ToString());

 string imageYouWantToDisplay = "Test.png";
 string base64String = "";
 String path = HostingEnvironment.MapPath("~/App_Data");
 
 using (Image image = Image.FromFile(path + "/" + imageYouWantToDisplay))
  {
     using (MemoryStream m = new MemoryStream())
      {
        image.Save(m, image.RawFormat);
        byte[] imageBytes = m.ToArray();

        // Convert byte[] to Base64 String
          base64String = Convert.ToBase64String(imageBytes);
      }
    }

    return base64String;

}

you can then call that in an action method

public DisplayImages (){
List<WhateverModel> test = new List<WhateverModel>();

 test = GetAll().ToList();

  test.ForEach(x=> { MyImage = ReturnImage();});

  return test;

  }

View

@model WhateverModel
<img src="@MyImage" /> or in js  <img src="${MyImage}" />

Answer 8

If you use the IIS Administration tool and go to Content Filtering (for your application), there is a Hidden Segments tab where you can remove App_Data

You'll notice this adds to Web.Config inside the "<system.webServer>" node:

<security>
    <requestFiltering>
        <hiddenSegments>
            <remove segment="App_Data" /> 
        </hiddenSegments>
    </requestFiltering>
</security>

A valid reason for doing that is if you use WebDeploy Publishing and want an easy way to set it to remove additional files at destination, excluding files from the App_Data folder (assuming you're not publishing anything from your project into App_Data and don't keep anything private there at the server side).

Configuring WebDeploy to not delete other specific folder when using the UI client seems to be problematic at least (see How to skip delete on folder during publish? )