Search code examples
htmlimagerelative-pathsrcabsolute-path

Relative img src is resolved as absolute... what am I missing?


In my project users can enter the URL of a website and the system goes and fetches all images from this website. Because the src of the image can be relative, the system "normalizes" it, so:

  • an image with src="http://host.com/image1.png" becomes "http://host.com/image1.png" (no change)
  • an image with src="/image2.png" becomes "http://host.com/image2.png" (prepend host)
  • an image on "http://host.com/sub/dir/page.html" with src="image3.png" becomes "http://host.com/sub/dir/image3.png" (prepend host and path)

Now take a look at this page if you may:

http://www.presentkuriren.se/presenter/4/728/Karlek/Pasta---hjartan.html

If you have a look at the source code, the main image is implemented as <img src="prodbilder/large/JJI10002.jpg"...

This would lead me to the conclusion that the absolute path is http://www.presentkuriren.se/presenter/4/728/Karlek/prodbilder/large/JJI10002.jpg, which it is not. It's http://www.presentkuriren.se/prodbilder/large/JJI10002.jpg and all browsers seem to understand that and display it correctly...

I'm slightly baffled and feel like I'm missing something obvious... please point it out to me!


Solution

  • There's the <base /> tag in the head:

    <base href="http://www.presentkuriren.se/">
    

    So all relative URLs (from images, links, ...) are relative to this one!