Github: How to fix broken image paths

#tutorial #fundamentals #github #html

Are you trying to deploy your page to Github, and suddenly, after everything was uploaded, your images stop showing up?
No worries, many people encounter this issue!

^{As an active member of the Scrimba discord community, I have noticed many beginners struggle when deploying their pages in the beginning. So I am writing this article in hopes of helping more people learn how to troubleshoot their code.}

To show how to troubleshoot this issue step by step, I created a folder that consists of index.html, style.css and a cat.jpg.
See Live Page
See Github Repository

We need to check two things:

Our image's location in the Github repository
Our HTML/CSS code

Depending on our Github repository's structure, we will have to tweak HTML/CSS code to make the file paths work again.

File position case scenarios

All files in one folder

Here, we can see that all files are together, which makes them siblings.
In this case, your image tag should look like this:

 <img src="cat.jpg" alt="Kitty">

Image files in another folder

Often, images are in a separate folder, and the image path has to be structured differently.

Here, the images folder is a sibling of index.html and style.css; however, the cat.jpg is a child of the images folder.

In this case, your image tag should look like this:

<img src="images/cat.jpg" alt="">

I recommend using inspector on your HTML/CSS. This way, you can check the image paths and change them without having to make any commits (but remember to edit your code after finding the correct solution!):