Troubleshooting Broken Image and CSS Issues on GitHub Pages

Are you facing a situation where you have successfully deployed your webpage to GitHub Pages, but the images or your CSS code are not showing up after the deployment? Don't worry; this is a common issue that many people encounter.

There are two possible reasons for this error to take place:

1) Wrong name
2) Wrong path

1) Wrong Name

Always check the spelling of the image you saved and name of the css file.

If you save your image as first-image.jpg or your css code as style.css but you wrote in your path 'First-image.jpg' or 'Style.css', it will not be visible on GitHub Pages.

But why?

You won't see such problem in your localhost because the file system might not distinguish between uppercase and lowercase letters in file names but after deploying your site on GitHub you will encounter such problem as GitHub is case-sensitive.

2) Wrong Path

Always check if your image path and css file path are written correctly.

Since the solution for both issues is the same, I will provide examples related to images only.

Alright, now let's see how to access an image.

a) If you save your image in the root folder such as the one shown below

Note: The "root folder" is the main or starting folder for your project.

Then your image path will be:

<img src="header_bg.png" alt="header" />

b) If you save your image inside a folder you created such as the one shown below

Then you will have to access your image by following the pattern ./folder_name/image_name

For example:

<img src="./images/hardy.png" alt="apple" />

c) If you save your image inside a folder of a folder such as the one shown below

Then you will have to access your image by following the pattern
./folder_name/folder_name/image_name

For example:

<img src="./images/icon/developer.png" alt="apple" />

And so on...

However, if your html file is in one folder **and your images or css files are in **another folder

Then you will have to access your image by following the pattern
../folder_name/image_name

For example,

<img src="../images/hardy.png" alt="apple" />

Remember, same thing applies for the css file names.

Sometimes, we do not use the dots(../ or ./) and we will still be able to view the images on our localhost. However, when deploying the same code on GitHub Pages without using the dot notation, the images and css code might not be displayed.

But why?

When you're working on your computer (localhost), not using the dots (./ or ../) in file paths might still allow images and CSS to display because the computer assumes you mean files are in the current folder.

However, when you put the same code on GitHub Pages, it becomes more strict. Without using the dot notation, GitHub Pages might get confused about where to find the images and CSS because it follows specific rules. The dots help specify the file paths correctly, making sure GitHub Pages can locate and display them properly.

Summary

If you write your image path like the one shown below

Wrong
1) src="images/my-image.png"
2) url(images/my-image.png)
3) href="css/main.css"

your image and css code may not appear on GitHub Pages so, make sure to place ./ or ../ when deploying your site on GitHub Pages or any other hosting platform:

Right
1) src="./images/my-image.png" (if the html code is in root folder and the css code is another folder)

2) url("../images/my-image.png") (if the css code is in one folder and the image is in another folder)

3) href ="./css/main.css" (if the html code is in root folder and the css code is another folder)

4) href ="../css/main.css" (if the html code is in one folder and the css code is another folder)

Happy deploying!