Image does not appear if in _posts/ directory

Question

Image does not appear in local host if saved in the _posts/ directory but appears if stored in another directory, e.g. posts/. Does anyone know why?

.md file:

![pressure plot]({{ site.baseurl }}/posts/fig/pressure-1.png)  # appears
![pressure plot]({{ site.baseurl }}/_posts/fig/pressure-1.png) # doesnt appear

.html file from the .md file:

<img src="/my-awesome-site/posts/fig/pressure-1.png" alt="pressure plot" />
<img src="/my-awesome-site/_posts/fig/pressure-1.png" alt="pressure plot" />

config_yml:

baseurl: /my-awesome-site

Error message in Terminal after jekyll serve for _posts/:

ERROR `/my-awesome-site/_posts/fig/pressure-1.png' not found.

And the path in the error is actually correct (yes, the images can be found in _posts/fig/, I was testing things out by saving in different directories), but somehow the image just doesn't appear. Can anyone explain?

I dont think all these explain: OSF, OSF, OSF, Jekyll, unless I'm not understanding this whole thing.

Answer 1

Looking in Jekyll's documentation, _posts is one of the "reserved" directory, parsed by Jekyll for files named with the format YEAR-MONTH-DAY-title.MARKUP. Apart from the particular directories:

Every other directory and file except for those listed above [...] will be copied verbatim to the generated site.

So your image, while existing in your sources, will not be copied in the generated site (see the content of _site/), since it is in the directory _posts while not being named with the wanted format.

Answer 2

I ran into the same issue today. Turns out there's a useful plugin for resolving this issue called jekyll-postfiles!

Link to jekyll-postfiles

To install jekyll postiles, add the following to your GEMFILE:

source 'https://rubygems.org'

gem 'jekyll'

group :jekyll_plugins do
  gem 'jekyll-postfiles'
end

Then run bundle. That's it!

Suppose you have the following structure:

_posts
    |
    |--> folder_a
         |
         |--> year-month-date-filename1.md
         |--> picture.png
    |
    |--> folder_b
         |
         |--> year-month-date-filename2.md
         |--> another_picture.ong

Then in filename1.md, you can invoke the image as:

<img src="picture1.png" width="700" height="500" class="center">

This is a very neat way instead of just putting pictures in a separate assets folder IMO.

Note: This plugin is not supported by Github Pages, host your site on services like https://netlify.com which support third party plugins.