11

I want to have a new folder containing a set of new html files. All the images inside it are in the format src="image.png" and image.png is located in the root folder. But when you put the HTML file in a new folder it can't find the image. You have to have it in the format src="../root folder/folder/image.png" to make it work. Which would mean a lot of pasting. I have tried putting image.png inside the folder but no change.

maxmitch
  • 277
  • 2
  • 5
  • 18
  • All the answers point to ``, please read http://stackoverflow.com/questions/1889076/is-it-recommended-to-use-the-base-html-tag carefully – Ryan B Jun 28 '13 at 19:41

2 Answers2

25

Use the <base> element. It allows you to specify a URL for all relative URLs in a page.

For example

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>This is an example for the <base> element</title>
        <base href="http://www.example.com/news/index.html">
    </head>
    <body>
        <p>Visit the <a href="archives.html">archives</a>.</p>
    </body>
</html>

The link in the this example would be a link to "http://www.example.com/news/archives.html".

For you, the base URL may be something as simple as <base href="http://www.yoursite.com/">. This would make images specificed as src="image.png" resolve as "http://www.yoursite.com/image.png"

See also https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

j08691
  • 204,283
  • 31
  • 260
  • 272
4

You need to set the base tag. If you add the tag in your page <head> like this:

<base href="http://yoursite.tld/folder/">

it should display images and with sources relative to this base path.

Michael Banzon
  • 4,879
  • 1
  • 26
  • 28