Images are loaded in my local environment, but not in github pages

Question

I'm using the solution offered by Tailwind to implement light/dark mode, but I'm having a problem. This problem has nothing to do with the light and dark mode functionality itself, but rather with the loading of the images that make up my light/dark mode button on the Github pages.

As you can see in the link below, when you click on the button the light/dark mode functionality works, however the images “sun.svg” and “moon.svg” are not loaded. Does anyone know why these aren't being loaded?

Github Page website: https://cristianolm.github.io/tailwind-dark-light-mode/

Here is the link to the respective github repository as well as two images; one that shows my environment in VS Code (where it is easy to see my folder structure and the tailwind classes that connect the images) and another that shows one of the images being loaded in my local environment.

My VS Code:

Image of the "sun.svg" on the button when the project is run on the Live Server:

Answer 1

The images are deployed to:

• https://cristianolm.github.io/tailwind-dark-light-mode/img/moon.svg
• https://cristianolm.github.io/tailwind-dark-light-mode/img/sun.svg

With the paths as they are written, /img/moon.svg and /img/sun.svg, these would resolve to:

• https://cristianolm.github.io/img/moon.svg
• https://cristianolm.github.io/img/sun.svg

Thus they do not load and result in 404 HTTP responses when requested by the browser.

You could consider changing the paths so that they are relative to the src/output.css stylesheet like:

<div class="… after:bg-[url(../img/moon.svg)] … peer-checked:after:bg-[url(../img/sun.svg)] …">