nuxt-community/nuxtent-module

How to reference an image inside your nuxtent markdown content file?

dimitrieh opened this issue · 12 comments

dimitrieh commented

I could not find this anywhere in the documentation, so I think its best to get this issue out there.

When using HTML or markdown, the following does not work:

![img](~/assets/img/image.jpeg)

or

<img src="~/assets/img/image.jpeg">

Help is appreciated! If I find out myself, I will document here! 😉

This question is available on Nuxt.js community (#c122)
dimitrieh commented

should this be closed instantly due to a bot? cc: @joostdecock

joostdecock commented
ishitatsuyuki commented

You can use .comp.md because it's loaded through webpack. If you can, document it as well!

dimitrieh commented

@ishitatsuyuki can you elaborate? :)

ishitatsuyuki commented

@dimitrieh Change the content file extension to .comp.md so it's loaded into the Webpack bundle. At there Webpack import syntax will just work.

dimitrieh commented

@ishitatsuyuki you mean of the blog article or the images trying to load in? 🤔

ishitatsuyuki commented

@dimitrieh The article markdown, of course.

easherma commented

This is not clear at all

cesasol commented

This module compiles to html as is and it outputs as html, there is no webpack parsing for the content inside the markdown files, so any image or asset should be static.

For the contrary if you use choose to use components (By using .comp.md extension) then it is parsed by webpack and the alias are applied.

easherma commented

@cesasol I see. Is there any documentation on this, especially the comp.md extension and how it's expected to be used?

cesasol commented

@easherma The documentation does not currently explain this behavior and I'm currently working on fixing some bugs and inconsistencies on the development branch.