GitHub Pages - images not loading - 404 error

Question

I deployed my GitHub repo to GitHub Pages and everything seemed to load perfectly, except the images.

I double-checked the case-sensitivity since other posts mentioned that as the answer, but unless I am missing something I don't believe that is my issue.

https://connercoding.github.io/cat-site/

When I inspect the image I get "Failed to load resource: the server responded with a status of 404 ()" four times, followed by the name of each image.

repo: https://github.com/ConnerCoding/cat-site

Answer 1

The issue is that the location of your images is at:

https://connercoding.github.io/cat-site/images/kitty.jpg

Where as your HTML is pointing to:

https://connercoding.github.io/images/kitty.jpg

to fix this, in your you need to change each image to point to "images/kitty.jpg" not "/images/kitty.jpg".

When you put the "/" before the link you are pointing to what we call the absolute path, the path from the highest directory of your project, we do not want that, we want the relative path so we remove the first /.

I hope that helped, if you need anymore assistance or if my solution was not correct, please reach out.

Thanks,

Owen