Image does not appear if in _posts/ directory - jekyll

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.