Base relative URL in Chrome & Edge

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/

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?

Your first link in the post appears to be broken, so I don’t see what you are talking about.
But I have viewed the source of the demo in both Firefox and Chrome (Windows), and don’t see a difference.

1 Like

Hover your mouse on the links and you’ll see their different destinations.

I still don’t see any difference. Can you fix the link so we see what you see?

1 Like

I don’t see any links but this is what I get in Chrome on the Mac.

@SamA74
Just updated my question. Sorry about the confusion I caused.

Ok I can see what you mean now.

I would guess its a bug in the developer tools where its adding the base url onto the href in the base tag. For every other url it will be correct but I guess they should not be adding it to the base tag itself.

I doubt it does any harm because the base href isn’t a link to follow as such.

1 Like

Actually, I see the same problem when I view the page source with Ctrl + U.

Yes I would guess it’s some sort of bug in those browsers when it reports the url from the base tag and doubles up on the path in error. I can’t see any other reason for it.

You could probably avoid it by using the full absolute url I suppose or add the trailing slash at the start of the href but as there is no harm done anyway then I guess it doesn’t really matter.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.