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?

https://stackoverflow.com/questions/26196788/pictures-not-showing-up-in-site-hosted-by-github — Ciro Santilli OurBigBook.com, Jun 10 '17 at 09:33

score 63 · Accepted Answer · answered Jan 04 '17 at 16:51

63

Nevermind, I solved it.

If anyone has the same problem.

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

answered Jan 04 '17 at 16:51

CJR

3,174
6
34
78

9

In my case, it worked after small delay. I assume that github hosting server took some time to update files. – dnivog Sep 17 '18 at 13:43

score 13 · Answer 2 · edited Dec 19 '21 at 13:20

13

yes, i have the same problem There are two most powerful ways to solve it

pay attention to the writing of image extensions, because on github pages Images.png is different from images.png
if in your code you write src on image like this src="/images/images.png" just remove / at the beginning of the section, and it will solve your problem.

edited Dec 19 '21 at 13:20

Dharman

30,962
25
85
135

answered Dec 19 '21 at 13:15

GigaTera

782
8
9

3

I removed the '/' at the beginning, it solved my problem. – Lee Li Feb 05 '22 at 22:01

score 11 · Answer 3 · answered Mar 12 '19 at 04:20

11

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

answered Mar 12 '19 at 04:20

martin-martin

3,274
1
33
60

score 11 · Answer 4 · answered Jul 21 '20 at 16:23

11

Adding my two cents for googlers: Git Pages seem to ignore the directories starting with underscore, so make sure you don't have <a href="_images/whatever.jpg">.

answered Jul 21 '20 at 16:23

badbishop

1,281
2
18
38

+1 by the time I scrolled past all the comments from those learning the web is case-sensitive I had started to wonder if the reason github pages can't find an image was because of that underscore in my path. – ow3n Dec 27 '21 at 13:20

score 10 · Answer 5 · answered Jan 04 '17 at 16:51

10

Write what you see.

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

answered Jan 04 '17 at 16:51

Quentin

914,110
126
1,211
1,335

score 7 · Answer 6 · answered May 10 '19 at 11:59

7

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.

answered May 10 '19 at 11:59

Saloni Sinha

71
1
2

This was my fix as well. I renamed everything using snake-case, and lowercase, to avoid any potential unknowns. Images are now working. – RockyK Jan 02 '20 at 04:47

score 6 · Answer 7 · answered May 25 '19 at 13:19

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!

score 6 · Answer 8 · answered Sep 01 '20 at 06:15

I tried using both JPG or jpg but it didn't work.

I tried below steps and it worked fine.

Try using the complete path. Let's say your image is inside repo-name/img/pic.jpg. Then use https://username.github.io/repo-name/img/pic.jpg instead of just /img/pic.jpg.

score 6 · Answer 9 · answered Mar 29 '22 at 22:07

for anyone still scrolling through the answers: do the following steps:

Make sure the image has actually been uploaded on your remote. On your main repo page , click on the name of the image, and see if it opens: if yes continue to next step
Load the site with "Github pages"
Open up inspect element (DevTools) , go to the html element in your .html file OR your CSS Style where you have defined your src
Here try out all the various solutions that people have described above [what worked for me: I added ./to the beginning of my src => ./name-image
whichever solution works, make that change in your local html or CSS and push to github.

score 4 · Answer 10 · edited Mar 08 '19 at 02:32

4

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:

edited Mar 08 '19 at 02:32

Worthwelle

1,244
1
16
19

answered Mar 07 '19 at 23:07

Timothy Ayegbede

41
2

score 4 · Answer 11 · answered May 09 '20 at 06:19

4

I had a similar issue, except I used git-lfs to manage the images. GitHub Pages doesn't support LFS, which will prevent the image from being displayed.

answered May 09 '20 at 06:19

bloudraak

5,902
5
37
52

score 3 · Answer 12 · answered Mar 14 '20 at 20:14

3

I had this exact same problem, GitHub Pages appears to be case-sensitive for images, and I wrote .JPG instead of .jpg, once I changed my image extension to be lowercase it worked.

answered Mar 14 '20 at 20:14

Seiont

59
8

score 2 · Answer 13 · answered May 16 '20 at 04:09

I struggled quite a while until I saw one post by Elharony: https://stackoverflow.com/users/5560399/elharony talking about case sensitivity. It turned out Jupyter notebook is case insensitive for image files, but GitHub is. That solved my problem.

score 2 · Answer 14 · answered Oct 15 '20 at 08:37

2

If you are importing file into your JS file and using relative path. Remember to have the relative path from the HTML file and not from JS file as it'll finally compile into the HTML file only.

answered Oct 15 '20 at 08:37

Satya

1,569
8
13

score 2 · Answer 15 · answered Aug 25 '21 at 15:25

2

my original <img src="images/walnut.png" change to <img src="/blob/main/images/walnut.png"

Will work on github hosting pages

answered Aug 25 '21 at 15:25

edwin

97
1
3

J B · Answer 16 · 2022-06-28T00:14:04.750

In case anyone has this problem while using jekyll to build a github site, there's yet another variation on this problem. It's a variation of the several answers above to prepend '.' or '..' on the image path in regular html. In the case of jekyll, which renders markdown source files, what should be prepended is {{site.baseurl}}, where baseurl is provided in the jekyll config file and is the root directory of the github repo. In other words:

![image 1](/images/image1.png "Image 1")

will render locally,

![image 1](./images/image1.png "Image 1")

will render on github pages as per the several answers above, and

![image 1]({{site.baseurl}}/images/image1.png "Image 1")

will render both locally and on github pages, which is the best way to do it with jekyll since all the coding of the site can be done locally in advance of pushing to github.

score 1 · Answer 17 · answered Dec 01 '18 at 05:03

1

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.

answered Dec 01 '18 at 05:03

deshraj singh

11
1

3

Welcome to SO, this answer can not solve the question, already he use th `src` in his image tag and the problem still remains, please read question more carefully and then try to give a useful answer. – Saeed Zhiany Dec 01 '18 at 05:26

Szilard Mihocsa · Answer 18 · 2023-01-19T10:36:14.223

1

I had the same problem with GitHub pages:

instead of ../img/image.png, I wrote ../img/image.PNG and now it works fine. I know this is not a solution but somehow worked for me.

Just in case if someone encounters this error!

edited Jan 19 '23 at 10:36

answered Jun 14 '21 at 19:23

Szilard Mihocsa

79
2
9

4

Changing .png to .PNG wouldn't solve this issue. – TheUnKnown Jun 14 '21 at 23:28

score 1 · Answer 19 · answered Dec 18 '22 at 18:15

I had the same issue In my case the issue was of /

<img src="/Images/shared/desktop/logo.svg" alt="" class="logo" />

I was using this for my Image in html in local machine it was working fine but in github its not displaying image

but when I removed / from the path it worked

<img src="Images/shared/desktop/logo.svg" alt="" class="logo" />

score 0 · Answer 20 · answered Jan 15 '23 at 10:58

0

I had the same problem, and I changed 'img' folder to 'image', then it worked.

answered Jan 15 '23 at 10:58

Mostafa Ahmed

23
5

score 0 · Answer 21 · answered May 17 '23 at 09:38

0

I changed /image.png to image.png and it helped.

(when pointing to an image on GitHub pages the file doesn't need the "/" if it's in the same file as the html or the file that it's referencing it!)

answered May 17 '23 at 09:38

Matin

11
2

score 0 · Answer 22 · answered Aug 13 '23 at 17:28

For me, the issue was having the images in LFS, but not checking out LFS files in my Github actions workflow that deploys to pages.

In your workflow, you need to enable LFS in your checkout step.

- name: Checkout
  uses: actions/checkout@v3
  with:
    lfs: true

Notice the lfs: true configuration.

Source: https://github.com/orgs/community/discussions/50337#discussioncomment-5349819

Images not displaying in Github Pages?

22 Answers22

Linked