Resolve assets in markdown content

[TixieSalander]

I would like to know if it's possible to have the webpack assets resolution inside of markdown content ? To display webpack handeled's images.

Reproduction link: https://codesandbox.io/s/dawn-snowflake-fv7l4?file=/content/post.md

1. I have an image in the assets folder
2. I link the image in the md file ![](~/assets/photo.jpg) (or <img src="~/assets/photo.jpg"> in html) the same way I would have in a component template

I'm not interested in putting files in the static folder since there is no compression and no hash for cache-busting.

[dtmzr]

As far as I know, this is currently not supported out of the box.

Maybe you can solve this with a component that dynamically loads the image for you, something like this?
https://codesandbox.io/s/nuxt-content-106-hwhbv?file=/content/post.md

[TixieSalander]

Yeah I thought about a solution like that, but not really compliant with content management tools :/

[atinux]

Hi there,

The main issue here is that @nuxt/content is independent of Webpack, meaning that if you change anything in content/ you can directly run nuxt export (Nuxt 2.13) without having to wait for Webpack to build.

We are thinking of a way to support assets/images/ with Webpack dynamic import so it can still support nuxt export without having to build again (expect if you add an image in assets/images/)

[TixieSalander]

I see it was removed from the todo list. Any update on the situation of this feature request?

[MattFaz]

Bumping, would love an update seeing as it has been removed from the To do?

[benjamincanac]

Don't pay too much attention to the todo list, we use it internally to plan the next release.

We have considered this issue and will be working on it soon.

[atinux]

The tricky part is to not involve Webpack for it when using images since it would force a rebuild and loose te speed of content update.
This is why it is not an such easy task 😁

[dtmzr]

@atinux might overwriting the html img tag by a custom component with the same attributes work for this case?
Maybe even as an opt in? 🤔

[atinux]

Indeed your solution was quite good actually, if you can open a PR so we can work on it it would be great :)

[Spunkie]

The tricky part is to not involve Webpack

@atinux Maybe I'm missing something but why wouldn't I want webpack involved doing it's thing? Wouldn't I want webpack to rerun if content involving a webpack asset gets updated?

[atinux]

The idea behing content is that you can change your Markdown without rebuilding your entire Nuxt app, making it faster redeployment.

Tracking assets is a bit more tricky in that case since Content does not depend of Webpack at all.

[dtmzr]

I fiddled around with it today and think I understood the way in which it could be implemented.

I would be really interested in your thoughts about the API design.
Should we support both, markdown images and HTML tags?

![image alt text](~/assets/localimage.jpg)

<img src="~/assets/localimage.jpg" alt="image alt text>

I have a few doubts about using the default tags and attributes because in this case, we would've to check if the developer is trying to load a local asset or remote image.
Maybe we could avoid this check by adding a custom attribute:

<img local-src="~/assets/localimage.jpg" alt="image alt text>

[dr1ss]

Yeah both should be supported, this will give more control since you can't do basic things like center an image with markdown