CODEWITHSUNDEEP
htmlgithub-pages
user2850271
user2850271

Reputation:

Images not showing up on GitHub pages

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.

Upvotes: 2

Views: 15943

Answers (4)

17dev
17dev

Reputation: 251

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.

Upvotes: 0

David Jacquel
David Jacquel

Reputation: 52779

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.

Upvotes: 6

Mrinal Jain
Mrinal Jain

Reputation: 927

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.

Upvotes: 2

aimorris
aimorris

Reputation: 456

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.

Upvotes: 2

Related Questions