Troubleshooting Broken Image and CSS Issues on GitHub Pages
Published: 2023-05-26 12:47:12


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) <u>**Wrong Name**</u>

**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) <u>**Wrong Path**</u>

**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**. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kea3sybxzbww0kdiwuul.png)


**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**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xpb0r61y2ji5m5gcubkh.png)

**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**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/adgrf9tdbzezaq64b4gz.png)

**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**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zz15t9vh1jzofcivfodo.png)

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!