I've always been an advocate for the use of relative paths when building web applications.
The web is such a fluid environment that, at any time, you might need to move or rename
a branch of your application or maybe even the entire application.
It's times like these that you'll be kicking yourself for hard coding all those
links to your application's supporting files and images.
Over the years, I've been involved with a number of application moves and site renames
and every time I'm amazed at the number of links that get broken. While broken links
aren't usually very hard to find and repair, the thing that always gets to me is how
much time it actually takes and how much better that time could have been spent.
So here are a few tips to help you keep applications from breaking when you
Let's look at an example. Compare the two lines below:
Assuming our site is hosted at http://www.sitename.com/, both of the above lines
result in the same thing being displayed. The main difference is that the first way, we
are stuck at that domain and in the current folder. The second method not only allows us
to change the name of our site easily, it also allows us to move this page into a
subfolder or new application easily without breaking anything
(assuming we take the images subfolder with us).
The kicker of it all is that it's actually less text to type to begin with!
It's also helpful to keep files grouped together. As I mentioned above, if we move
a page to a new location, we'll also need to move the files it depends on. Doing this is
much easier if they're grouped together. So for those logos and images that are used
throughout your site, go ahead and put them in /images right off the root.
On the other hand, for images that are only used in the /products folder,
you might consider placing them in /products/images so that they are
easily associated with the web pages that use them.
To encourage relative path use, ASP.NET 2.0 even includes a new feature called
application-relative URLs for use with server controls which take paths as attributes.
This lets you start the path with the ~ character and the server will
resolve it back to the root of the application. This can make development simpler in
situations where you build a web site as an application and then deploy it to the
root of a site. Here's a quick example to show you what it looks like. Assuming
we have an <asp:Image> control on our page named
imgSiteLogo, we can set it's ImageUrl
property to an application-relative URL like this:
imgSiteLogo.ImageUrl = "~/images/sitelogo.gif"
For more information about paths and how they relate to building web applications,
you might want to read
Where Do All These Paths Lead?.
It's relatively old, but is still a good introduction to paths and explains those pesky
. and .. things you've probably seen in some of our sample code.