Do you refer to images the correct way in ASP .NET?

Last updated by Brook Jeynes [SSW] 8 months ago.See history

There are many ways to reference images in ASP.NET. There are 2 different situations commonly encountered by developers when working with images:

  • Scenario #1: Images that are part of the content of a specific page. E.g. A picture used only on 1 page
  • Scenario #2: Images that are shared across on user controls which are shared across different pages in a site. E.g. A shared logo used across the site (commonly in user controls, or master pages)

Each of these situations requires a different referencing method.

Option #1: Root-Relative Paths

Often developers reference all images by using an root-relative path (prefixing the path with a slash, which refers to the root of the site), as shown below.

<img src="/Images/spacer.jpg" />

Bad example - Referencing images with absolute paths

This has the advantage that <img> tags can easily be copied between pages, however it should not be used in either situation, because it requires that the website have its own site IIS and be placed in the root (not just an application), or that the entire site be in a subfolder on the production web server. For example, the following combinations of URLs are possible with this approach:

Staging Server URL Production Server URL
bee:81/ www.northwind.com.au
bee/northwind/ www.northwind.com.au/northwind

As shown above, this approach makes the URLs on the staging server hard to remember, or increases the length of URLs on the production web server.

Option #2: Relative Paths

Images that are part of the content of a page should be referenced using relative paths.

<img src="../Images/spacer.jpg" />

Good example - Referencing images with relative paths

However, this approach is not possible with images on user controls, because the relative paths will map to the wrong location if the user control is in a different folder to the page.

Option #3: Application-Relative Paths

In order to simplify URLs, ASP.NET introduced a new feature, application relative paths. By placing a tilde (~) in front of a path, a URL can refer to the root of a site, not just the root of the web server. However, this only works on Server Controls (controls with a runat="server" attribute).

To use this feature, you need either use ASP.NET Server controls or HTML Server controls, as shown below.

<asp:Image ID="spacerImage" ImageUrl="~/Images/spacer.gif" Runat="server" />
<img id="spacerImage" src="~/Images/spacer.gif" originalAttribute="src" originalPath=""~/Images/spacer.gif"" runat="server">

Good example - Application-relative paths with an ASP.NET Server control

Using an HTML Server control creates less overhead than an ASP.NET Server control, but the control does not dynamically adapt its rendering to the user's browser, or provide such a rich set of server-side features.

Note: A variation on this approach involves calling the Page.ResolveUrl method with inline code to place the correct path in a non-server tag.

<img src='<%# originalAttribute="src" originalPath="'<%#" Page.ResolveUrl("~/Images/spacer.gif") %>'>

Bad example - Page.ResolveUrl method with a non-server tag

This approach is not recommended, because the data binding will create overhead and affect caching of the page. The inline code is also ugly and does not get compiled, making it easy to accidentally introduce syntax errors.

We open source. Powered by GitHub