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?

Slemmer

#26197288 – Rally

>> Make sure to fully reload the page with Ctrl + R – Amortizement

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.

Slemmer

In my case, it worked after small delay. I assume that github hosting server took some time to update files. – Flophouse

Answer 2

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

1. pay attention to the writing of image extensions, because on github pages Images.png is different from images.png
2. 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.

Dambrosio

I removed the '/' at the beginning, it solved my problem. – Frascati

Answer 3

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

Hasan

+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. – Dentiform

If you are not using Jekyll, you can add the .nojekyllfile so that underscore images are recognised. See reference here: github.blog/2009-12-29-bypassing-jekyll-on-github-pages – Moorings

not only directories, but also files starting with underscore are ignored. I had a _base.css file that I had to rename to base.css in order to make it work – Abe

Answer 4

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

Ammonium

Answer 5

Write what you see.

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

Faunus

Answer 6

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.

Oaten

This was my fix as well. I renamed everything using snake-case, and lowercase, to avoid any potential unknowns. Images are now working. – Epifocal

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!

Pavonine

I had the same issue: a stray "../" which worked locally because I already was on root level, but removed the repo name on GH pages. – Vowel

Answer 8

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.

Muckraker

Answer 9

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

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

1. Load the site with "Github pages"

2. Open up inspect element (DevTools) , go to the html element in your .html file OR your CSS Style where you have defined your src

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

4. whichever solution works, make that change in your local html or CSS and push to github.

Edaedacious

Answer 10

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:

Westmoreland

Answer 11

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.

Mohandis

Answer 12

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.

Prittleprattle

Answer 13

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.

Volsci

Answer 14

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.

Publicist

Answer 15

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.

Outstand

Answer 16

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

Will work on github hosting pages

Abatement

Answer 17

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.

Electrocardiogram

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. – Psyche

Answer 18

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!

Dahle

Changing .png to .PNG wouldn't solve this issue. – Sisto

Answer 19

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" />

Weather

Answer 20

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

Hackberry

Answer 21

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!)

Paunch

Answer 22

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

Oidium

Answer 23

If you're using LFS together with GitHub Pages and Actions, deployment of images and other assets isn't supported out of the box. A workaround could be to update actions/checkout in your deployment pipeline:

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

Fix example here.

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

Sloan

Answer 24

Have to add my 2 cents here:

1. Some images might be loading because they are less than 10 Kb and Babel will load them as data URLs instead of relative paths.
2. Make sure that your 'homepage' is configured correctly in the package.json file. When you deploy via gh-pages, your 'homepage' should be set to the link for the website that Github generates.

This is what worked for me.

Discounter

Answer 25

Images weren't showing up in deployed webapp. The problem was my images were stored in the src folder. The solution was to move the images to public folder.

Now I referenced the image as:

<img className="hero-img" src="images/landing.png" alt="" />

The images started showing up in the deployed as well

Gruver