Why is Markdown syntax to add an image on jekyll website not working?

3
votes

I'm searching (for severals hours now) how to add an image to a page on my Jekyll website hosted by Github page.

I already read lots of post where solutions are given but none of them seems to work. However the Markdown syntax image is pretty clear...I don't see where I'm wrong ?

THE PROBLEM : My website only displays the line of code, but not the image ! As if Jekyll compilator considered this code like a normal text.

The syntax which is generally given is : ![My Title](http://url/to/img.png) (see more Here)

According to the forums which I have visited, the reccurent problem turns around the path to the image. Asbolute or not ? with a missed slash : "/" or with a bad use of liquid syntax {{site.url}} .

I've read all these posts, tested their solution and tried multiples combination with out any result!

Here is the basic markdown page I wrote:

---
layout: default
title: Catégories
menu: main
weight: 10
permalink: /categories/

--- 
<div>
  <ul>
   <li>
    ![Logo Jekyll]({{site.url}}/assets/images/categories/jekyll-logo.png )
   </li>
   <li>
     ![Logo Jekyll](http://memofil.github.io/assets/images/categories/jekyll-logo.png)
   </li>
   <li>
    ![Logo Jekyll]({{"/assets/images/categories/jekyll-logo.png"| absolute_url}})
   </li>
   <li>
    ![Logo Jekyll](/categories/jekyll-logo.png)
   </li>
   <li>
     <img src="{{site.url}}/assets/images/categories/jekyll-logo.png" />
   </li>
  </ul>
</div>

and you can see on my website that the images are not displaying with the markdown syntax, but there is no problem with the classic html method (which leads me to think that it's not for me a url problem...). I also put my image at differents places on my repo to find a solution that's why the url is changing.

Is there anyone who had the same problem and solved it? The solution is probably so easy but I'm a newbie in Jekyll and I really don't see where is my mistake.

Thank you very much for your help !

1
imagemarkdownjekyllgithub-pages

1 Answers

4
votes

The markdown syntax to add an image on jekyll website is not working because it is inside HTML tags, so when mixing HTML code with kramdown syntax and you want this kramdown code to be processed you need to specify it explicitely.

One way to do it isto add the markdown="1" attribute to the HTML tag, for example:

 <ul>
<li  markdown="1">
![Logo Jekyll]({{site.url}}/assets/images/categories/jekyll-logo.png )
</li>
</ul>

Look that there are no spaces before the kramdown code, or it will be interpreted as a block code.

For this particular case you can just use kramdown lists:

- ![Logo Jekyll]({{site.url}}/assets/images/categories/jekyll-logo.png )
- ![Logo Jekyll](http://memofil.github.io/assets/images/categories/jekyll-logo.png)

- ![Logo Jekyll]({{"/assets/images/categories/jekyll-logo.png"| absolute_url}})
- ![Logo Jekyll](/categories/jekyll-logo.png)