Examples of issues with paths

Image Path Examples

context and assumptions

In my examples directory, i have a file named boombox.svg

I expect that I can use a relative path to reference this image. Since this index.html page is in the same directory, I should be able to reference it with either ./boombox.svg or boombox.svg

Tests

using './boombox.svg'

using 'boombox.svg'

using (pseudo) absolute path of 'example/boombox.svg'

this image appears, because it's being taken as the absolute path, incorrectly.

loading index.html explicitly

if we go to solarpunk.cool/example/index.html, the first two images will load but the third will not.

go to /example/index.html

The behaviour is only as I expect if i go to solarpunk.cool/example/ or solarpunk.cool/example/index.html

It is likely that site visitors will not add a trailing slash to the page they want to visit.

Do I have false assumptions on how this page should behave?

Relative Image

below should be a boombox, whose source file is located in this example directory.

I am including it with the following code:

      <img src='boombox.svg' />

I can also try setting the source to "./boombox.svg", but will get the same result.

Absolute Image

Below is the boombox again, now with the absolute path

      <img src='/example/boombox.svg' >

Relative Style

There are two css files in this dir, astyle.css and bstyle.css

In the head of this document, I link to astyle.css with a relative path.

astyle.css contains a rule that should make the below div orange

I should be orange

Absolute Style

I link to bstyle.css with an absolute path.

Because of this, the below div will be green.

I will be green.

Internal Links

With internal links, even to pages in the same directory, I must provide an absolute path.

the file two.html is located in this example dir.

this will bring you to the correct page this will bring you to a 404 this will bring you to a 404 as well

(Specifically, the last two links will bring you to https://solarpunk.cool/two.html)

External Links

external links work fine, except if you set the target to "_blank".

With this attribute set, you can click, but nothing happens.

This link to sr.ht will not open neither will this one. this one will open