CODEWITHSUNDEEP
gitimagegithubrepositoryjekyll
Ven Yao
Ven Yao

Reputation: 3710

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

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!

Upvotes: 4

Views: 4240

Answers (3)

kuolai shu
kuolai shu

Reputation: 41

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

Upvotes: 1

Ven Yao
Ven Yao

Reputation: 3710

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.

Upvotes: 0

David Jacquel
David Jacquel

Reputation: 52789

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)

Upvotes: 2

Related Questions