Base relative URL in Chrome & Edge-CodePudding

Sample directories and files:

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

I use a relative URL in my demo file's base tag:

<!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>

And it works with no problem. But if you check the page source in Chrome & Edge, here's the destination the base relative URL points to: https://mori79.github.io/images/images/

Screenshot

It's different in Firefox & Safari: https://mori79.github.io/images/

Although the link text is the same, it points to different destinations in different browsers.

Here's a real demo.

Is it my wrong coding? Or is it a bug in Chrome & Edge? Or probably in Firefox & Safari?

CodePudding user response：

That's just a "bug" in the dev-tools, which is apparently reparsing the relative url, based on the value of the current document.baseURI.

Everything else works fine. You don't need to worry about this:

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

<base href="foo/">

If you really want to you can open an issue at https://crbug.com but honestly this is so minor I doubt it's worth your time.