46

I am trying to follow the Jekyll docs and am stuck on how to display an image

---
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]

I feel very silly asking this question as it is so basic but I can not find any answers to my question

Is it possibly a configuration error on my own system. I am using apache2, ruby gems, etc

Thanks in advance

Kevin Workman
  • 41,537
  • 9
  • 68
  • 107
Clive Tristram
  • 561
  • 1
  • 4
  • 4

5 Answers5

46

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)
Kevin Workman
  • 41,537
  • 9
  • 68
  • 107
  • 1
    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 – Clive Tristram Oct 23 '16 at 20:31
  • How to do this when you have all of your images uploaded to the folder *images* on Github? – FaCoffee May 05 '17 at 16:28
  • 1
    @FaCoffee 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)` – Kevin Workman May 05 '17 at 17:54
  • How do I make this to be displayed in center of the page in layout `page` – Krishna Oza May 20 '20 at 16:30
  • @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](https://happycoding.io/tutorials/html/css) to style your page. – Kevin Workman May 21 '20 at 03:44
8

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.

Anto
  • 3,128
  • 1
  • 20
  • 20
2

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.

Andy Clifton
  • 4,926
  • 3
  • 35
  • 47
1

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.

Atul
  • 2,673
  • 2
  • 28
  • 34
0

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.

l001d
  • 723
  • 9
  • 15