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?
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?
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.
https://stackoverflow.com/Tags
https://stackoverflow.com/tags
above two URLs give the same result it seems StackOverflow URLs are not case sensitive, However, the following GitHub page URLs are case sensitive.
https://whoami-shubham.github.io/hello-world
https://whoami-shubham.github.io/Hello-world
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
I am fairly new to Bolt CMS and CMSs in general. I am getting the hang of twig and things like that and have implemented a lot of dynamic content now. I am however having an issue on my timeline page in linking image assets.
I have a content type called news which has an imagelist field. I need to be able to pull the image path from the content type but when I get the raw path (ie. "files/2018-06/image-name.png") and do nothing shows up. Is something wrong here? Is this an .htaccess issue?
I am open to any and all solutions. Let me know if you need more info.
If you have an imagefield in your record you usually can show the image with
{{ record.image|showimage() }}
or
<img src="{{ record.image|thumbnail(320, 240) }}">
For more information see: https://docs.bolt.cm/3.5/templating/twig-functionality#showimage and https://docs.bolt.cm/3.5/fields/image
You can also look how it is done in one of the example themes.
I want to post an image onto my blog (yes that simple!)
My website is hosted on GitLab Pages and uses the Hugo framework (v0.23). I forked my webpage from here, https://gitlab.com/pages/hugo (thus my blog folder structure is the same).
My content publishes fine and is stored here: home/content/post
I created a folder which stores images here: home/content/post/images
When I insert an image into a post the image won't publish. I've tried using the relevant short code in the post (below) with no luck:
{{< figure src="image/image_name.png" title="image title" >}}
{{< figure src="/image/image_name.png" title="image title" >}}
where:
the image is stored here: home/content/post/images/image_name.png
the post is stored here: home/content/post/post_title.md
I suspect the problem is the new images folder I added is somehow not "seen".
Please help!
The problem was easily fixed, I was pointing to the wrong pathway. D'oh!
{{< figure src="../image/image_name.png" title="image title" >}}
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?
Nevermind, I solved it.
If anyone has the same problem.
GitHub Pages are case sensitive. Not only for folders, but also for image names.
Write what you see.
It is Screenshot2.png. With a lower-case png and a capital S at the start.
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. ⏳
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">.
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.
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.
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!
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:
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.
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.
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.
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.
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.
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.
my original <img src="images/walnut.png" change to <img src="/blob/main/images/walnut.png"
Will work on github hosting pages
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.
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:
will render locally,
will render on github pages as per the several answers above, and
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.
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" />
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!
I had the same problem, and I changed 'img' folder to 'image', then it worked.
I'm just getting started with Jekyll and I managed to do some cool stuff locally - i.e. when I locally serve the page and open it on my browser, everything works fine.
However when I pushed everything on GitHub, I see the actual liquid tags on my pages, and not what they're supposed to stand for.
I'm not even sure of how I can debug this, as locally everything looks fine. I made sure my local and remote repositories are synced.
Thanks!
ADDITIONAL INFORMATION - HTML and CSS are rendered properly, and the Jekyll frontmatter seems to be doing its job by pointing to the correct layouts. It's only the liquid tags that don't seem to be working. I did have liquid tags working just fine on initial tests I did directly on the remote repository (very basic stuff like showing titles, dates, etc), but after pushing things I wrote (and successfully tested) locally, it seems like they are not being correctly interpreted anymore.
In your three _layouts, add a <meta charset="UTF-8"> just after the opening <head>.
In _layouts/default.html and _layouts/timeline.html change {{ page.content }} to {{ content }}.
In _includes/timeline.html remove {{ page.content | markdownify }}.