CODEWITHSUNDEEP
htmlgithubjekyllgithub-pages
Kuba_
Kuba_

Reputation: 814

What is correct way to include images on GitHub Pages?

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.

Upvotes: 4

Views: 9778

Answers (2)

windyvation
windyvation

Reputation: 551

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

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

Upvotes: 0

marcanuy
marcanuy

Reputation: 23952

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;" />

Upvotes: 8

Related Questions