为什么相对图像路径解析为绝对路径？答案

【问题标题】：Why are relative image paths resolving as absolute paths?为什么相对图像路径解析为绝对路径？
【发布时间】：2019-06-21 17:51:50
【问题描述】：

我已经阅读了一些资源，包括 this one 关于如何在 Web 浏览器中解析相对路径。但即使经过我的研究，我仍然感到困惑，因为我看到了一个相对图像 URL 的示例，它与我目前所读的所有内容相矛盾。

我有一个与此网址类似的网页：https://www.example.com/uri1/uri2/

该页面上有一个带有相对路径的图像标签：

<img src="example.png"/>

这是图片的正确位置。我想知道为什么浏览器没有尝试从以下位置解析图像：https://www.example.com/uri1/example.png

据我了解，后者是图像应该解析到的位置。我在 Chrome 和 FireFox 中查看了具有相同结果的页面。

我正在编写一个脚本，用于解析 CMS 内容并在下载图像之前将相关图像路径解析为完全合格的路径。

在我的情况下，这不起作用，因为在浏览器中，相对路径实际上被解析为域的基础。因此，当我的脚本尝试解析完全限定的图像路径（例如 example.com/uri1/example.png）时，它会生成不正确的 URL。

【问题讨论】：

这取决于 html 文件的位置。使用 img src ="example.png"，这从您当前访问的 html 文档所在的文件夹的基础开始执行。如果失败，则您的图像位于不同的目录中，或者您的代码需要正确。如果您告诉您的 html 文档图像源是 example.png，而不是 ./uri1/uri2/example.png，您的浏览器不知道在另一个文件夹中查找它。就像您告诉我您住三个沿路的门，我可以朝任一方向行驶 3 门，如果你不在那里，那么你需要更正给定的方向
感谢您的回复@aaronlilly 此页面未列在文字目录中，而是列在 ModX 中的人工 uri 结构下。不确定这是否会有所不同。
你的页面中有<base>标签吗？
@AuxTaco 有！这似乎是问题所在。感谢您的帮助！

【解决方案1】：

感谢@AuxTaco，我意识到页面上有一个<base> 标签。 <base>标签用于覆盖相对路径的默认分辨率。

我必须更新我的脚本以包含<base> 标签出现在任何给定页面上的可能性。

【讨论】：