Images not displaying in Github Pages?

Question

I added a project site to my Github project. But some photos are not displaying in the site.

Img code:

<img src="img/screenshot2.PNG" class="img-responsive" alt=""> </div>

folder structure (img is a folder):

img
    Screenshot2.png
index.html

I tried with .png and .PNG (some earlier SO answers suggested it) and none of them work

Any solutions?

Answer 1

Nevermind, I solved it.

If anyone has the same problem.

GitHub Pages are case sensitive. Not only for folders, but also for image names.

Answer 2

Write what you see.

It is Screenshot2.png. With a lower-case png and a capital S at the start.

Answer 3

While hosting a website on Github,I faced the same issue.The image file was saved as an .jpg extension on my local(in small letters) and It was working fine. I pushed the same to github. That did not work.

I had to change the extension to .JPG (in caps)since it was the original extension of the image.Github Pages are case sensitive to the name of the files being uploaded.

Answer 4

You can try by putting the "image link address" from the github repository, in the 'src' attribute of the 'img' tag of the HTML code of your file.

Answer 5

I had a folder on my laptop named "assets", but when I pushed to Github it became "Assets". I had to change it in my HTML so I could view the images on the Github page

The repo on my laptop:

The repo on GitHub:

Answer 6

As @dnivog mentioned, GitHub's servers take a little time to update files.

If nothing of the above addresses your situation, just check back in a little while. ⏳

Answer 7

I had this problem today. I solved it by:

• Double-check the Case Sensitive of the images (i.e. Screenshot.png isn't the same as Screenshot.PNG or even screenshot.png)
• Double-check the PATH of the image. For me; It was ../img/myImg.jpg, and I changed it to ./img/myImg.jpg to point to the current directory of the project

After fixing the 2 mentioned issue above, it worked fine... Hope it help you get unstuck!