Introduced in ASP.NET 2.0 (released Nov. 7, 2005), Master Pages provides an object-oriented approach to web page design. Master Pages is the next generation to templates. In the blog post, Master Pages, Part 1, the master page concept was introduced. This article talks about image reference paths.
Image Paths
The .master page image references are always resolved from the location of the page which inherits the .master page (the content page). As long as the .master page is at the same folder level as the content page, the reference to the image resolves correctly:
In this example, Index.aspx uses the .master page and images referenced by the .master page resolve correctly.
If the .master and content pages are at different folder levels, as shown...
... then the .master page contains a different path to the image than the content page and the image can't be resolved.
Solution one:
ASP.NET runtime provides a feature called “URL rebasing”. The runtime will try to “rebase” relative URLs it finds on server-side controls inside a master page. This means the following relative path will work, no matter where the master page and web form live. Putting a runat=Server" statement in the <img> attributes resolves the image location:
<img src="~/Images/GVLighthouse.gif" runat="server" />
Solution two:
ASP.NET contains a handy function in the Page object called ResolveClientURL, which will resolve URL's that are defined client-side. This is particularly useful if an object CAN"T be converted to a server-side object, such as the <Body> tag:
<Body background = '<%ResolveClientUrl("~/Images/GVLighthouse.gif") %>' style="margin-left: 10px" />
Or on the simple image tag:
<img src="<%=ResolveClientUrl("~/Images/GVLighthouse.gif") %>" style="margin-left: 10px" />
Quite often, images will also be referred to from within the included .css style sheet in the .master page. This is not a problem, though, since the image URL path is always with respect to the .css style sheet location:
body
{
background-image:url('images\mylogo.gif');
}
Image and other element references can be tricky when using .master pages, but the payoff is the flexibility of a more object-oriented approach by putting all the common parts of your pages in .master pages.
David Heater, P.E.
GrandView Business Solutions Developer