I've read a few resources including this one about how relative paths are resolved in web browsers. But even after my research I'm still confused because I'm seeing an example of a relative image URL that contradicts everything I've read so far.
I have a webpage with a similar URL to this one: https://www.example.com/uri1/uri2/
There's an image tag on that page with a relative path:
<img src="example.png"/>
The browser is resolving the image to: https://www.example.com/example.png
This is the correct location of the image. I'm wondering why the browser didn't attempt to resolve the image from: https://www.example.com/uri1/example.png
From what I understand, the latter is where the image should have resolved to. I looked at the page in both Chrome and FireFox which had identical results.
I'm writing a script that parses through CMS content and resolves relative image paths to fully-qualified ones before downloading the images.
In my case, this isn't working because in the browser, the relative path is actually being resolved to the base of the domain. And so, when my script attempts to resolve the fully qualified image path (e.g example.com/uri1/example.png) it produces the incorrect URL.
Thanks to @AuxTaco I realized that there was a <base> tag present on the page. The <base> tag is used to overwrite the default resolution of relative paths.
I had to update my script to incorporate the possibility of a <base> tag being present on any given page.
