Search code examples
htmlurlrelative-path

How to set completely relative URLs


I'm having problems setting URLs in a particular situation. I have a Dreamweaver template, that uses the usual relative to domain URLs (e.g. "/images/foo.png"). This works fine on the server, but in the local environment, it has issues, as it thinks the name of the network drive it is on is the domain, rather than the folder it is in on the drive.

So where as it should be "file://networkdrive/localsite/images/foo.png" it's "file://networkdrive/images/foo.png", this is obviously causing broken links, and if I use other relative URLs, such as "../images/foo.png" then I will have to amend the links every time I make a page that drills further down in the site structure.

I did have one solution, creating a mapped drive pointing at that folder, then "Z:/" was the first layer, and it all worked. That was until our communications team needed to see it on their Macs, Macs can't do drive letters as I've found from Googling, so I'm back to the same problem as before.

Any ideas on how I could force the URL to be correct when using "/images/foo.png"? This will save me a lot of headaches when creating pages if it could be done.


Solution

  • Run a local web server, like Nginx, lighttpd, Apache, or Python’s out of your project directory:

    python -m http.server # Python 3
    python -m SimpleHTTPServer # Python 2
    

    This comes closest to a real environment for development, and it’ll allow you to test things like server-side code and Ajax.

    Alternatively, you can use relative URLs everywhere, and one <base> tag per page.

    <base href="../">
    

    Don’t.