2

I've tried everything to make the image show up on my GitHub pages site but nothing is working and now I'm just fed up and will be very grateful if someone can help me fix this simple but annoying issue.

Code:

...
</footer>
<div><img src="assets/coffee.JPG" alt="coffee"></div>               
</body>

Directory structure of image: pagename.github.io/_layouts/assets/coffee.jpg

Directory structure of html: pagename.github.io/_layouts/default.html

It just shows up as the standard icon for broken images with the alt tag.

3
  • 1
    Try using an absolute path /assets/coffee.jpg. Also make sure .JPG is properly capitalized to match what the filename is (case matters)
    – Tallboy
    Feb 17, 2018 at 6:31
  • That capital extension thing works in windows environment but not in linux, so check the extension Feb 17, 2018 at 9:29
  • 1
    @Tallboy Sigh..I can't believe that was literally it. Thank you :)
    – user2850271
    Feb 17, 2018 at 19:56

4 Answers 4

6

As Github Pages uses jekyll to generate your site, any underscored folder like _layout will not be copied during generations. So none of your assets will be available. See documentation.

Copy your _layouts/assets folder to your root (pagename.github.io/_layouts/assets/ --> pagename.github.io/assets/) and verify that you call your assets with the proper case.

2

There are a couple of things that may be wrong.

  1. Possibly uncapitalising the file extension so it is .jpg instead of .JPG could fix the problem.

  2. Maybe it is showing up but is really small. Try adding a fixed width and height to it and see if that helps.

2

There can be several reasons for the images not showing up

  1. The image SRC which is being formed could be wrong, so please paste the URL in a new tab and check if the image is opening.
  2. The file extension of the image could be wrong spelling, as I can see that you have written.JPG in code but your image is in .jpg format

I personaly try to test the URL which is being formed in SRC.

0

I just faced the same issue and it's really annoying how github handle your github pages. Yes, it is case sensitive and you should keep attention on that.

I just found the solution of that problem and I'll share that with you. You just have to give the path of any images like - images/form.JPG .

Do not give absolute path there just keep one folder in your projects that you will use for images source. Don't make the images path too long. Note that here I'm not using any backslash at the starting of images.

Also .JPG in capitalize is mandatory 'cause I've tried all possible solution and this worked for me. Do not give your image path like - /images/form.jpg .

If your file name is mixture of capital and lowercase letter make it in 'lowercase' only, so you'll not face any file names issues. Because github pages are case-sensitive.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.