Image loading inconsistent with Jekyll + GitHub Pages

user_13132925 0
Viewed 185

I've recently created a Jekyll/Github pages site in the hopes of starting a small blog to share thoughts and side projects. After writing my first post, I've realized that some but not all of my images within the post are not working. I have been trying for hours to figure out why in vain. Below is my assets/images folder. Images suffixed with 3, 4, and 5 display correctly, but images 1 and 2 do not. Is it possible that Jekyll/Github only takes images of a certain size threshold?

my assets/images folder

I believe my _config.yml is configured appropriately. It is at least able to find images 3-5.

url : "https://selfawarelemon.github.io/evil-lemonade"

For reference, here is how I am referring to all the images within the blog post. Again, this logic works for images 3-5 but not images 1-2.

<img src="{{ site.url }}/assets/images/101820_1.png" width="250px">

The only difference in each tag is the width I supply to make the images appropriately sized with the width argument. I'm not sure what the issue is here. I've additionally tried waiting a while after a commit to see if it simply takes time to load the images but that didn't work. Is there something super obvious I am missing or simply a property of Jekyll/Github pages I am ignorant to?

jekyll github-pages
2 Answers

As you can see in the image provided, the filenames are capitalized:

101820_1.PNG
101820_2.PNG
101820_3.PNG
// ...

However, in your image tag, the filename is not capitalized:

<img src="{{ site.url }}/assets/images/101820_1.png" width="250px">

Capitalizing the filname should fix the issue:

<img src="{{ site.url }}/assets/images/101820_1.PNG" width="250px">

Paths in URLs are case-sensitive according to the standard. Depending on the operating system Github Pages is running on, case sensitive image paths may or may not matter. This is probably what is causing the inconsistency in rendering the images.

This answer was suggested by @shubhamjha in a comment. I created this small answer for future visitors with the same problem

user_88589950

The quick solution is to keep the case of asset extension (uppercase/lowercase) as it is e.g. https://whoami-shubham.github.io/assets/img/earth.jpg and https://whoami-shubham.github.io/assets/img/earth.JPG would give a different result.

In your image path extension of the image is png in lowercase however in actual it is PNG uppercase. so changing it to uppercase would solve the issue.

<img src="{{ site.url }}/assets/images/101820_1.PNG" width="250px">

Domain names are case insensitive according to RFC 4343. The rest of the URL may or may not be case sensitive. for e.g.

above two URLs give the same result it seems StackOverflow URLs are not case sensitive, However, the following GitHub page URLs are case sensitive.

user_77843540
Related