Images in _post folder are broken

Hi everyone.
My problem is similar to given here: I cannot get an image to display - Help - Jekyll Talk (jekyllrb.com)

I have my posts as markdown in _posts folder. Also inside this folder, I have images folder where during writing my posts with markdown, automatically copy the images I paste in Typora to that folder which eases all process for me. However, images are broken in blog. Because, Jekyll does not give the link in folders starting with underscore.

There are recommendations to keep the images in a separate folder, however, it will make the process too hard for me since I plan to post frequently instead of constant pages. So, I will have to manually change the links in all markdowns when I create a post.

Is there any easy way?

You can see my blog here:
BD · Tunnels, Geotechnics and Codes (berkdemir.github.io)

And if I change anything, see the screenshot below:

It is same for about page where I put the image in the main folder! Still broken. I really can’t understand the problem.

the _posts folder doesn’t exist in the built site (_site) so stuff you put in there doesn’t get output - other than the posts themselves which jekyll is looking for. It will ignore anything else in there.

So like the other answer says, you need to have them somewhere else - like assets/img or something.

I’ve never used Typora, (looks cool) but a quick look at their docs seems to show they have an option to support this, though their example of using a folder named _media is not so great as it starts with an underscore and jekyll will ignore it by default - unless you add that folder to the include(?) list in the config? I would use something like just images or better assets/images:

As for your about page - the same thing more or less applies, put the images somewhere and reference that location. If you put that image in the root then I am not sure why it won’t display, in the Chrome inspector it looks like it is trying to load it from there.

Looking at the _site folder you have locally and then looking at the Chrome inspector to see where it is looking for things is very helpful.

1 Like

Thank you very much! One thing to ask regarding your answer:

their example of using a folder named _media is not so great as it starts with an underscore and jekyll will ignore it by default - unless you add that folder to the include(?) list in the config?

Can’t I add the _posts/images folder into include list? (I don’t know how we use include list, but just to provoke some thoughts regarding this.)

I have converted the site to the method that we have discussed. However, a new problem arised, since it uses relative link (why? I don’t know why.) when I open the post, the relative link is broken and figures cannot be seen because it tries to add the relative link to the post’s link instead of the baseurl.
Do you know how can I fix this?

it looks to be working in your link above - am I missing something?

as for just including the _post folder, no idea what that would do and I would not do it as that is not the intended behavior.

1 Like

When we are in the main page, it works. Thanks to you.
When we go into the post, it does not work due to relative links. See the page.
Comparison of Building Rigidity Calculation Approaches to Estimate Tunnelling-induced Deformations · BD (berkdemir.github.io)

whats the link to your repo?

1 Like

Sorry, I didn’t give that: berkdemir/berkdemir.github.io

do you have use relative checked on typora?

1 Like

I’d ask on their GH issues page, seems like it should be easy but since I don’t use it I can’t test it.

1 Like

First of all, thank you very very much for all the help, you are great.
I think, yes. An example:
…/images/BuildingRigidity-1.png
I tried without relative link, but it gives the link as a local file. I tried and this is how it looks.

I think this guy talks about manually editing markdown files (which would be a lot of pain)
How To Add Images In Jekyll Posts With Relative Links (travis.media)

what if you just do the relative link but without the periods in front - so just /images. If understand paths properly a slash only means to start at the root.

1 Like

That worked!
The previous link I sent suggests using {{site.url}} instead of “…”. But your’s is easier. Thank you very much!

yeah, I don’t bother with that - especially if you are hosting on your own domain. I’m sure there are reasons to do it but in my experience it is just more complex.

Main issue would be if you wanted to use GH pages and serve a project you would need to use a base url and by doing some of that upfront you could save yourself a world of hurt if you ever needed that.

1 Like