How can I display an image in a post on a blog powered by Jekyll?

Question

I am trying to follow the Jekyll docs and am stuck on how to display an image. I tried the following Markdown:

---
layout: post
title:  "My first post!"
date:   2016-10-20 16:17:57 +0200
categories: jekyll update
regenerate: true
---

This is in the `_posts` directory.
It can be edited then rebuild the site to see the changes.
You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.

![name of the image][{{site.url}}/assets/P6740674.JPG]

How can I make the image appear in the rendered post?

Spickandspan

Answer 1

If you want to use site.url, you have to add a url variable to your _config.yml file. More info in the Jekyll documentation.

But you might not have to use site.url at all. Any urls that start with a / slash will be relative to the top level of your domain. So you could do this:

![image tooltip here](/assets/image.jpg)

Surprising

Thanks for this, Kevin. It led me to the understanding of the problem. In fact I used /assets and this referred to the directory _assets so it could not find the file. When I changed it to a folder /img everything worked – Spickandspan

How to do this when you have all of your images uploaded to the folder images on Github? – Andonis

@Andonis If you have a follow-up question, please post it in its own question post. But my guess would be you just need to add /images/ to any url you use: ![image tooltip here](/images/assets/image.jpg) – Surprising

How do I make this to be displayed in center of the page in layout page – Ephemeris

@KrishnaOza If you have a follow-up question, please post it in its own question post. But my guess would be you'd need to use CSS to style your page. – Surprising

Answer 2

I could see an images directory created under assets by default. I've placed an image as follows.

assets/images/myimage.jpg and add following line in the post.

![My image Name](/assets/images/myimage.jpg)

Run bundle exec jekyll serve and see if there is any error. If you have mentioned mismatching file location, you will see error here.

Erna

Answer 3

The problem here is annoying simple - you have the wrong format for your image link.

It should be ![name](link). You have ![name][link]. Note the difference in the brackets. Everything else is fine.

Facetiae

Answer 4

I know this is an old question but I spent some 15min on this (jekyll/github blog is my secondary blog). So adding a suggestion here.

Briefly, as Kevin suggested, add the image file to a path under the root and give path to that file. Make sure that the file/directory is being tracked; not .gitignored.

My assets directory is inside _site directory. But, when I added a new image under that path git status did not show it as newly added- .gitignore ignored the _site directory. So Kevin's suggestion did not work as is. But as per his suggestion, I reasoned that as docs is my site's root, if I add an images directory there and add the image under that then something like

![image description](/images/my_image.png)

should work. And it worked this way. Not sure if this is the best way. Sharing here in case you have similar config.

Loosetongued

Answer 5

In my case, I forgot to push the image to remote and therefore the image didn't show. Just to keep this in mind as well.

Bichloride