How to use <base /> to redirect links?

Question

I have an info page I've written in plain HTML.

All the image links are like so:

<img src="/images/image.png" /> so that they refer to the root of the web site.

However I want to look at the page with the images embedded before updating it. In chrome, <img src="/images/image.png" /> looks in file:///c:/imgs/. However I want to redirect this to file:///C:/web/site/imgs/.

I'm trying to use <base > to no avail.

Answer 1

You can't use <base> when your URLs are absolute like that. Here are a couple of alternatives:

Solution #1: Use the Windows subst command to make a drive letter for your "root" directory:

subst R: C:\web\site

then point your browser at R:\

Solution #2: Install a web server with the root configured to be C:\web\site, and point your browser at that.

Using a real web server is a much better way to test a web site - things like the browser's JavaScript security policies are significantly different between local files and files read via a web server.

Answer 2

You'll have to change the image paths to relative URLs if you want the < BASE > tag to change the domain as well as the folder path.

Answer 3

<base > only affects page-relative links. It essentially "pretends" your page is in a different location, so addresses given relative to the page will now be relative to that new location.

Your addresses aren't relative to the page at all. Regardless of where within file:/// you say the page is, the images are quite clearly given as "/images/..."

On most platforms, setting up a simple web server on localhost is fairly straightforward. (Mac OS X comes with one out of the box, which requires nothing more than checking a box in System Preferences.) Setting up such a server for development would let you view the site at http://localhost/ and might resolve this "relative links" problem.

If that solution is impractical, you might consider setting up aliases or symlinks to make the server-relative links that you already have work correctly. That's a bit hackish, though.

Answer 4

first of all you must be sure that the base's href property content ends with /

for example:

<base href="file:///C:/web/site/imgs/" />

given that, base will change the behaviour of all the relative URIs in your page, so <img src="/images/image.png" /> will continue to point to file:///images/image.png, but

<img src="images/image.png" />

will now point to file:///C:/web/site/imgs/images/image.png .