Eleventy: markdown images with url filter

[Miosame]

Is there any shorter built-in way than doing ![]({{ "/img/test.png" | url }}) to embed images independent of pathPrefix? I know you can create your own shortcode and do e.g. {% image "/img/test.png" %}, but I was thinking this has to have some built-in way to do this surely?

[denisbrodbeck]

The only way to turn ![]({{ "/img/test.png" | url }}) into ![](/img/test.png) with automatic pathPrefix would probably be to manually extend the used markdown parser (markdown-it). There you could hook into the image parsing part and pass your custom url resolution code.

[nhoizey]

If you want to be independent from pathPrefix, you could put your images in the same folder as the Markdown file, and use only ![](test.png).

[Miosame]

@nhoizey thanks, your comment made me remember my previous attempt where I tried exactly that, just with subfolders, since it would make the hand-off process easier too, just last time I didn't think of adding a eleventyConfig.addPassthroughCopy("markdown/**/"); passthrough, which allows for easy e.g. ![](images/test.jpg) inside markdown!

@denisbrodbeck thanks, that would've been my next step if not for the above!

[Miosame]

@nhoizey might not be so easy after all, since the markdown files get converted to a folder, but the "images" subfolder or files in the same folder as *.md are one level above, so ![](images/test.jpg) or ![](test.jpg) will reference an image inside the now newly created markdown directory, which does not exist up until runtime.

[nhoizey]

I use only index.md Markdown files, so that it doesn't create another folder level.

For example:
https://github.com/nhoizey/nicolas-hoizey.com/tree/master/src/articles/2020/05/05/jamstack-is-fast-only-if-you-make-it-so

[Miosame]

oh, that explains it, I guess as a workaround one can just do ![](../images/test.jpg), thanks again! 👍