4

Disclaimer: I have searched SO, and found similar questions (ex: URL), mainly suggesting paying attention to upper/lower case differences in names, but they didn't resolved my issue.

Some time ago I have created a GitHub page, have written my first post and included some images in it. Recommended way of including images are relative links, ex.:

<img src="./images/equation-1.gif" style="display: block; margin: auto;" />

However, this way images were only displayed inside the GitHub repository, but not on the GitHub page. So I have replaced them with direct links to which images in GitHub repo referred to, like below:

<img src="https://github.com/KubaMichalczyk/kubamichalczyk.github.io/raw/master/_posts/images/equation-1.gif" style="display: block; margin: auto;" />

And it worked. However, only at first sight, as after few days all links have crashed. Since then, those images are displayed most of the time, but sometimes the links are broken. Unfortunetely, I have no idea why it is the case and I would like to repair it once and for all. Therefore, my question is what is a correct way of including images on GitHub page? Why relative links don't actually work? Does it matter if the repository is Private or Public?

The address of my page is here and the repository is located here.

2 Answers 2

8

According to your domain kubamichalczyk.github.io , you are using User and Organization Pages sites.

The correct way to do this involves adding an url configuration to _config.yml with your production url and using that key in your templates when loading images.

Using github pages gem

Make sure you use the Github pages gem to be in synch with your production environment and not depend on your local configuration

     $ bundle init

In Gemfile:

source 'https://rubygems.org'
gem 'github-pages', group: :jekyll_plugins

Install the correct Jekyll version:

$ bundle install

Then always run jekyll with bundle:

$ bundle exec jekyll serve

Adding url

In _config.yml:

url: https://kubamichalczyk.github.io/

Images folder

Images shouldn't be inside _posts folder, they should be at root:

/images

Referring to images

In posts use the above url config so it will be replaced with localhost when developing and with your Github pages site url in production {{site.url}}/images/equation-1.gif:

<img src="{{site.url}}/images/equation-1.gif" style="display: block; margin: auto;" />
0

On a GitHub io page, The following syntax works for me:

<img src="images/equation-1.gif"/>

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.