Images in content folder? Simple, but I can't make it work


#1

I have my blog posts and images together in the content folder like this: image

I want to reference the images in my .md content files like this: ![4 Weeks 1](4weeks1.jpg).

I’ve been reading the docs and support questions about bundles and image processing, but I can’t figure out what I need to change to make this work. I’d like to do the closest thing to what I described above.

I tried making a subfolder for each post like this, but it also did not work:
4weeks1/
index.md
4weeks1.jpg

What should I do?

Here’s my code: https://github.com/valzi/light-transmuter

These posts seem relevant:


#2

Hi,

If you look at the generated html code:

<img src="4weeks3.jpg" alt="4 Weeks 3" class="pure-img">

it is looking for your image at the same folder as the current page, which is not where the image is. So on the homepage, It looks for example.com/4weeks3.jpg and on the post page it looks for example.com/posts/4weeks3/4weeks3.jpg. You can see this in your browser’s console log (right click > inspect > console).

You have it under content/posts/, which means it is being rendered at example.com/posts/4weeks3.jpg. Try it as ![4 Weeks 3](/posts/4weeks3.jpg) instead.


#3

I just tried placing this in my single.html but it did not help. Does it work in version 0.54?

Here’s a post with a broken link:
https://light-transmuter.netlify.com/posts/4weeks3/


Remove Markdown Syntax Images from .Content
#4

I moved the above post from the other topic here.

It is not good practice to bump old topics @valzi

Also it seems that @pointyfar solved your problem so I marked the reply as the solution.


#5

That allows the images to display online, but it does not allow the display in editors on my machine (such as Typora.) I’d prefer them to work in both, if that’s somehow possible. Is it?

You solved my real problem though. Thanks.


#6

I didn’t realize bumping old posts was a problem here. Thanks. I better read the rules.