Referencing images in markdown

[theduke]

Lets say I have a blog post and some images for the post in:

content/my-post/index.md
content/my-post/image1.png

How can I get a webpack require url for the image into my markdown content?
Does anyone have a good approach for this?

[MoOx]

We need to handle this in phenomic loader. Feel free to track #147 for this.

This is kind of tricky since this will depend on the renderer you are using, but I guess it should not be that hard, especially for markdown with remark, since an AST is available!

[MoOx]

Another solution is:

• add a loader in your webpack config for png & co using file-loader
• use relative links in your markdown

putaindecode.io uses this technique for now. See

• https://github.com/putaindecode/putaindecode.io/blob/4e257538a7a93060690d6122eb4f9098a030cff7/webpack.config.babel.js#L81-L85
• https://github.com/putaindecode/putaindecode.io/blob/4e257538a7a93060690d6122eb4f9098a030cff7/scripts/phenomic.browser.js#L3
• https://github.com/putaindecode/putaindecode.io/tree/4e257538a7a93060690d6122eb4f9098a030cff7/content/fr/articles/css/grilles/grid-layout
• https://github.com/putaindecode/putaindecode.io/blob/4e257538a7a93060690d6122eb4f9098a030cff7/content/fr/articles/css/grilles/grid-layout/index.md#thinking-in-grid