How do I create root-relative links in a static site?

Question

When building a static HTML site, you can set the base url like so <base url="http://localhost:8888/mysite" />. Supposedly when you insert, say, an image, you can do so from that base url like so <img src="/img/logo.png" />, which is equivalent to <img src="http://localhost:8888/mysite/img/logo.png" />

My problem is that these relative links don't work when I move the site around, which is a pain because I'm trying to share it with someone on Dropbox. I thought I could just chage the base url to <base url="http://dl.dropbox.com/u/xxxxxxxx/mysite" />, but the image links are looking here: <img src="http://dl.dropbox.com/img/logo.png" /> instead of the full base URL I set in the head.

Why is this?

Answer 1

Lose the leading / to make it a relative URL:

<img src="img/logo.png" />

There are 3 types of URL:

• Fully Qualified, e.g. http://example.org/path/to/file

• Absolute, e.g. /path/to/file (assuming the link comes from any page in the example.org domain)

• Relative, e.g. path/to/file (assuming the link comes from the root (/) "folder" or there is a base URL http://example.org/) or to/file (assuming the link comes from within the 'path' "folder" or the base URL is http://example.org/path/)