Question

These are the three ways in which the same image has been referenced to in my project in 2-3 different files:

url(<% =QDAAB.Constants.SiteURL %>images/Docs/Plan/myImage.jpg)

url(~/images/Docs/Plan/myImage.jpg);

url(../images/Docs/Plan/myImage.jpg);

I am a bit confused about this relative, absolute path thingy. How do I refer to this image in such a way that no matter in what folder the image is located it is always displayed and never lost. Which of the above three references ways is right to achieve what I want? Or is there another way too to refer to an image?

Hope the question is clear.
I am beginner to .NET and have just begun trying out stuff.

Also what exactly do the above code lines mean? Like, what’s this Constants.URL? What are “~” and “..” doing?

Here’s where the image is being used in one of the pages. When I changed it to “../..” the image got displayed, earlier it wasn’t.

<td align="center" style="background-image: url(../../images/Docs/Plans/myImage.jpg);

Answer 1

None of these will ‘magically’ find your image no matter in what folder the image is located. You will always have to give it some part of the path to the image in your links to have that image rendered.

However, out of these three, I would recommend the second line url(~/images/Docs/Plan/myImage.jpg); as the best way to accomplish what you need to do.

The ‘~’ in .NET is a special character for the framework that starts your path at the root of your site. It essentially says, no matter what directory the request came from within the site, go to the root and start your path from there.

The ‘../’ is standard HTML syntax meaning go up one directory and then start looking for your path.

So for instance, let’s say your site is located at http://www.domain.com. And here is your folder structure

Images
  Docs
    Plan
CSS
Admin
SomeFolder
    SomeFolderSubFolder
 Default.aspx (your default document when you get to your site)

Examples

If you are in default.aspx, then the hand-coded URL to your images would be (/Images/Docs/Plan/myImage.jpg) as you are at the root of your site at this point.

If you are in SomeFolder, then the hand-coded URL to your images would be (../Images/Docs/Plan/myImage.jpg) since you have to go up 1 directory to get to the root of your site where the Images directory is located.

If you are in SomeFolderSubFolder, then the hand-coded URL to your images would be (../../Images/Docs/Plan/myImage.jpg) – as you would need to go up 2 directories to get to root of your site where your images folder is.

Now, by using the url(~/images/Docs/Plan/myImage.jpg); method, you do not have to worry about knowing how many directories deep you are in your site, it will always start looking from the site root. Each one of those examples above replaced with this line of code will always render out the image correctly.

EDIT

Ok, so you are trying this with in-line styles. You might/should be able to do this:

<td align="center" style="background-image: url(<%= Server.MapPath("~/images/Docs/Plans/myImage.jpg") %>);></td>

Or, there is nothing wrong with using the ../ method, you just need to keep in mind where you are at in your folder structure. Lastly, if you were to declare this style in your stylesheet instead of inline, it doesn’t matter where the images are at in relation to the page, just where they are at in relation to the stylesheet FYI.

<td align="center" class="tdWithImages"></td>

styles.css

#tdWithImages{background-image: url(../Images/Docs/Plan/myImage.jpg);}