How to show images in posts of Github pages created by jekyll?

Question

I got a repo in Github. I created a static website for this repo using Jekyll. Here is the website: http://andrewhzau.github.io/RICENCODE/ . I created some .md files in the _posts directory. Everything is okay except that the figures are not shown correctly.

Here is one of my .md file:

---
layout: post
title: "GSD1"
description: ""
category: genes
tags: [grain setting, photoassimilate translocation, plasma membrane, grain filling]
---
{% include JB/setup %}

........

## Key figures
![Expression]({{ site.url }}/assets/images/GSD1.exp.png)  
![Phenotype]({{ site.url }}/assets/images/GSD1.pheno.png)

And here is the generated page for this post:

http://andrewhzau.github.io/RICENCODE/genes/2014/09/20/GSD1/

On my local computer, I use "jekyll serve" to generate the website and access it using

http://localhost:4000/ 

and the figures are okay.

Can you guys help me with this? Thanks!

Answer 1

Maybe you forgot to set the site.JB.BASE_PATH parameter in _config.yml :

BASE_PATH : /RICENCODE

Then call your images like this :

![GSD1 phenotype]({{ BASE_PATH }}/assets/images/GSD1.pheno.png)

Answer 2

I used the full URL and the figures were shown correctly.

## Key figures
<img src="http://andrewhzau.github.io/RICENCODE/assets/images/GSD1.pheno.png" >  
<img src="http://andrewhzau.github.io/RICENCODE/assets/images/GSD1.exp.png" > 

The figures won't behave properly on my local computer. Anyway, the problem was solved as long as it is okay with the website in the internet.

Answer 3

I had similar problem, my kitty image shown cutely in localhost but missing in github pages with 404 error and the pathname is incorrectly missing baseurl . I solved it in kitty-image-problem-solved .

In short, in order for your /assets/images/GSD1.exp.png to show up in your _posts/ posts, you should do

   ![Expression]({{ "/assets/images/GSD1.exp.png" | relative_url }})  

The document of relative_url is at jykyll-liquid-filters