What is the recommended way to use Nuxt Content with Nuxt Image

[remiconnesson]

What is the recommended way to use Nuxt Content with Nuxt Image ?

I plan to build using nuxi generate and to put my images in the /static directory

[LoganTann]

You can override the default ProseImg component to use nuxt-img instead of the native img tag

EDIT : see the following comment #2082 (comment), my code below is not sufficient.

Original code

<!-- components/content/ProseImg.vue -->
<template>
  <nuxt-img />
</template>

[nobkd]

The example in this discussion (#2082 (comment)) lacks, as the attributes are not transferred to the underlying component.

See this solution: #390 (comment) to override the Content img tag.
But instead of using commas (,) to separate the properties, I'd use spaces ( ) instead, as not using spaces can lead to props not being parsed properly.
Also, the path can also be components/content/**/ProseImg.vue instead.

If you don't want to override the default img for whatever reason, just name your component differently. You can the use :your-nuxt-img-component-name{alt="" yourprops} in your markdown instead. As you can see, you can't take advantage of the default img Markdown syntax in that case.