Question

I am designing a webapp in which I will have my resources on the http://www.site.com/resources/ directory

On my HTMLs, I would refer to that directory by an absolute path /resources/, but the problem is that when I test that in a web server, the path now will be http://localhost/webapp/resources/ and using the absolute path will look for //localhost/resources/

I found that I can use ./ to refer to the webapp relative root directory, and it works. But I don’t like how it looks.

Which other alternatives do I have?

• Use absolute path and place application in the server’s ROOT directory
• Use a PHP / JSP variable that determines the current root directory
• Continue using ./
• Other thing…

Thanks in advance!

Answer 1

To rephrase your problem, you have a site that will must work in two different configurations:

• http://servername/mypage.htm, and
• http://servername/SubSite/mypage.htm

The second configuration might represent a test site (possibly even localhost on the developer’s machine).

All paths for images, links, stylesheets must work using relative addressing, on either deployment.

Thus, setting an image’s src="/resources/mypic.jpg" would fail the test on the SubSite example (called a Virtual Directory or Application in IIS) because the / would tell it to look at http://servername/resources instead of http://servername/SubSite/resources and so it doesn’t work.

---

My stance for my dev team is to ALWAYS use document-relative pathing.

Thus, in the basic example of mypage.htm which sits at the root of the web site tree (regardless of where it sits on the file system or web server) you would set the image’s src="./resources/mypic.jpg"

Basically, remember, in html, when you see "./" it means from this page. If you need to go up a directory (say you have another page under ~/Reports/myreport.htm that also needs to show that image, you would set the source on the image tag on that page as src="../resources/mypic.jpg" which means go up one level.

Note, I did something sneaky there. in ASP.NET, ~/ means the root of the web site, regardless of where it resides. I’m using it as shorthand to reflect the root of the site. Though in ASP.NET, any server-side control can actually use a URL with ~/ in front of it and it will correctly resolve it to the proper pathing.

I’ll tack in another important point I just learned today while researching other parts of this problem. In a CSS file, if you use document-relative paths to point to images, etc, that pathing is relative to the CSS file. That’s a good thing, because CSS files seldom change position, relative to image files. What call’s the CSS file does move around however, which brings me to my next point.

---

What I’ve explained so far works great for basic web pages and makes them very portable. Once you have multiple pages in different directories referring to code or controls that generate HTML references to CSS, images, etc, you need to get THOSE paths fixed as well.

Basically, you need to modify those URLs (usually within the code or controls you wrote) to have the proper ./ or ../ needed to get to the resource you meant.

In ASP, you could use VBscript to use Server.MapPath("/resources/mypic.jpg") to get the proper URL you need relative to the site’s root.

In ASP.NET, you can use Page.MapPath("~/resources/mypic.jpg") to get the proper URL you need.

I’ve also written functions to generate just the correct ./ or ../ slashing I need in .NET as follows:

public static string GetDotDotSlashesToRoot(string Path, bool IncludeTrailingSlash) {
        System.Text.StringBuilder result = new System.Text.StringBuilder();
        Path = Path.Replace("\\", "/");
        Path = Path.Replace("~", string.Empty);
        if (Path.Length > 0 && Path[0] == '/') Path = Path.Substring(1);
        string slashless = Path.Replace("/", "");
        for (int i = 0; i < Path.Length - slashless.Length; i++) {
            result.Append("../");
        }

        if (!IncludeTrailingSlash && result.Length > 0) result = result.Remove(result.Length - 1, 1);

        return result.ToString();
    }

You can run that through converter.telerik.com to convert to VB.net if need be. I set my master pages to expose a javascript global variable JSPATHTOSITEROOT using that function so I can prefix any paths I need via JS as well.

For PHP, I haven’t touched that in a while, so all I can give is some pointers to other code I’ve published to solve this similarly:
https://www.php.net/manual/en/function.dirname.php#91208

That link shows how to make PHP include nesting work like C/C++ include nesting, but you can use the same trick to fix up your paths for html as well.

My end summary is, if anybody hands you a project with paths for images and css that all start with "/" they fail the test. The code is not portable. A good web developer in the 21st century is aware that a site may be deployed at the server root or as a sub-site for a variety of reasons and codes appropriately.