Reputation: 3592

Images not displaying in Github Pages?

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?

Upvotes: 45

Answers (26)

lycheejelly

Reputation: 177

Try a hard reload Ctrl+Shift+R or Cmd+Shift+R. This is what worked for me.

Upvotes: 0

Harsh Suvarna

Reputation: 17

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

Upvotes: 0

Seth Harlaar

Reputation: 138

Have to add my 2 cents here:

Some images might be loading because they are less than 10 Kb and Babel will load them as data URLs instead of relative paths.
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.

Upvotes: 0

Jakob Bagterp

Reputation: 1354

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

Upvotes: 0

starikcetin

Reputation: 1481

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

Upvotes: 0

Matin

Reputation: 11

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

Upvotes: 0

Szilard Mihocsa

Reputation: 79

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!

Upvotes: 1

Mostafa Ahmed

Reputation: 23

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

Upvotes: 0

Shivam kaushal

Reputation: 336

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

Upvotes: 2

J B

Reputation: 440

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.

Upvotes: 3

ebrahim

Reputation: 115

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.

Upvotes: 6

GigaTera

Reputation: 1280

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.

Upvotes: 23

edwin

Reputation: 107

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

Will work on github hosting pages

Upvotes: 2

Satya

Reputation: 1789

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.

Upvotes: 2

k_learner

Reputation: 137

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.

Upvotes: 6

badbishop

Reputation: 1668

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

Upvotes: 17

Daniel

Reputation: 21

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.

Upvotes: 2

bloudraak

Reputation: 6002

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.

Upvotes: 4

Seiont

Reputation: 59

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.

Upvotes: 3

Elharony

Reputation: 1001

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!

Upvotes: 9

Saloni Sinha

Reputation: 71

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.

Upvotes: 7

martin-martin

Reputation: 3564

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

Upvotes: 13

Timothy Ayegbede

Reputation: 41

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: