Chrome 中的基本相对 URL & 边缘

Question

示例目录和文件：

parent/
├── images/
│   ├── cat.jpg
│   └── dog.jpg
└── demo.html

我在演示文件的 base 标签中使用了亲戚 URL：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Demo - Mori79</title>
  <link rel="icon" href="/favicon.ico">
  <base href="images/">
</head>
<body>

<img src="cat.jpg" alt="Cat">
<img src="dog.jpg" alt="Dog">

</body>
</html>

而且它没有问题。但是，如果您检查 Chrome & Edge 中的页面源，这里是 base 相对 URL 指向的目标：https://mori79.github.io/images/images/

Screenshot

在 Firefox 和 Safari 中有所不同：https://mori79.github.io/images/

虽然link文本相同，但在不同的浏览器中指向不同的目的地。

这是一个真实的demo.

是我编码错误吗？还是 Chrome & Edge 中的错误？或者可能在 Firefox 和 Safari 中？

Answer 1

这只是 dev-tools 中的一个“错误”，它显然是根据当前 document.baseURI 的值重新解析相对 url。

其他一切正常。你不需要担心这个：

console.log(document.baseURI, document.querySelector("base").href)
// logs correctly https://stacksnippets.net/foo/ twice

<base href="foo/">

如果你真的想要，你可以在 https://crbug.com 打开一个问题，但老实说，这太小了，我怀疑它是否值得你花时间。

Chrome 中的基本相对 URL & 边缘

Base relative URL in Chrome & Edge

html

google-chrome

firefox

safari

microsoft-edge