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.
- 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.
<img src="cat.jpg" alt="Kitty">
Often, images are in a separate folder, and the image path has to be structured differently.
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!):
And that's it!
Additional useful links:
- Inspect Element: How to Temporarily Edit Any Webpage by Zapier.com
- GitHub Pages Tutorial by Happycoding.io