Summary

File paths can sometimes get pretty irritating in asp.net. Say, you moved a user control from one sub-directory to another; all the images that user control uses could now be broken. This article looks at what to watch out for to avoid broken images and other paths.

Using the tilde (~)

Tilde (~) is the short-cut for the root of the site. This is what you would probably use most of the time for resolving the paths of the image files, aspx files, or any other resources.

Let’s say, you placed all your images under the images directory, right underneath root of your website directory. The approach of using ~ works perfectly whether you are running the site locally (i.e. perhaps developing/debugging) or running the site on a server. For example, if you used ~/images/test.jpg for the source of an image, it will be properly resolved both on the local machine and on the server.

Resolving the paths in a Repeater

Lot of times you will get the images for a listing (of, say, products) via a templated control like Repeater.

Code Listing 1. Resolving the image paths in a Repeater

<ItemTemplate>

…

<asp:Image ID="imgProduct" Height="150px" Width="100px" ImageUrl=’<%# Eval("ProdImage", "~/images/{0}") %>’ CssClass="prod-image" AlternateText=’<%# Eval("ProdImage") %>’ runat="server" />

…

</ItemTemplate>

As shown in Listing 1, we have obtained the name of the image file from the database (we got this through Eval(“ProdImage”, …)). Then we know that all these image files are stored in the images directory. That’s where we added the path: “~/images/”. In the above Eval, {0} is replaced by the ProdImage for this item.

The runtime HTML generated for the above is:

You might be surprised to see that the ~ is not replaced by the full sitename (like http://localhost/ or http://www.infinitezest.com/); Instead the src for the image is simple “images/prod1.jpg”. In HTML terms (the client-side), that’s as good as specifying the full path.

If you didn’t put the ~/ in front of the images like the following, you might run into problems:

<asp:Image ID="imgProduct" Height="150px" Width="100px" ImageUrl=’<%# Eval("ProdImage", "images/{0}") %>’ CssClass="prod-image" AlternateText=’<%# Eval("ProdImage") %>’ runat="server" />

The generated code will append the path of the file where this repeater is used from. If this repeater is part of user control which is in the root directory, then you won’t have any problems. However, if this user control is in a sub-directory, say, Products, then that directory will be appended. So, the generated code (client-side HTML) will look like the following:

The prod1.jpg is not in the Products/images directory, but in the /images directory. So, if you have the standard fixed set of directories, you would want to use ~ for the root and asp.net will generate the right resolved path.

Capturing the empty image

Just like in the declarative portion of the Repeater, you can use ~ to represent the root of the site inside the code as well.

Code Listing 2. Capturing the empty image

protected void rptArticleListing_ItemDataBound(object source, RepeaterItemEventArgs e)
{

…

  // If the image is missing or empty ...
  if ((img.ImageUrl == String.Empty) || (img.ImageUrl == "~/images/"))
    img.ImageUrl = "~/images/default-product.jpg";

…

}

In the above example, some products might not have an image associated with them. During the ItemDataBound event of the Repeater, we can see if the ImageUrl is empty and if so, give a default product image.

Figure 1. Empty Image URL

As you can see in Figure 1, the ImageUrl is empty (or rather ~/images/ -- which has been added in the Eval statement inside the repeater; the directory is added, but the file is empty). We capture this situation in the if statement and provide the default image.

Paths for the client side

Remember, the ~ is the server side representation for the root. It works in the server side code (i.e. the asp.net controls and code). However, you can’t use it in the raw client-side HTML. Browsers won’t understand that.

So, if you are typing in the description of a product and want to point to an image (or some other resource) within that description, you can’t use the ~ for root. You would need to resolve that ~ yourselves before sending it to the browser. Some tools (like IFRAME and web editors) might resolve the path for you.