CodeNewbie Community 🌱

Ha Anna
Ha Anna

Posted on

Github: How to fix broken image paths

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.


Project 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

Files in the Github repositoryHere, 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">
Enter fullscreen mode Exit fullscreen mode

Image files in another folder

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

Files in the Github repository, main folder Files in the Github repository, images folder
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="">
Enter fullscreen mode Exit fullscreen mode

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!):

Using Inspector on a page

And that's it!
Happy coding!

Additional useful links:

Top comments (3)

Collapse
 
tomford51 profile image
henry water • Edited

Thanks for the help, as a backup variant I can use stock images, the last time I needed a bikini vector, is good site that can be useful

Collapse
 
yuridevat profile image
𝕁𝕦𝕝𝕚𝕒 👩🏻‍💻

Nice article, Anna!

Collapse
 
haanna profile image
Ha Anna

Thank you, Julia, glad you've liked it!