How to use Nuxt Image to show a caption for images?

[dofine]

Newbie here :) Trying to use Nuxt Image in markdown syntax to provide a figcaption for image, but with no luck.

I don't know the issue should be about Nuxt Image, Docus, or Nuxt Content? My minimum not-working example: https://github.com/dofine/docus-test-image and the deploy: https://docus-test-image.vercel.app/

Some search results: nuxt/content#1537

[lucpotage]

Hi @dofine,

It seems there is not solution for now. See related issue: nuxt/content#390

[stared]

There is no built-in way, but a workaround is easy. Nuxt Content uses MDC, which provides an easy way to modify any HTML component created from Markdown.

Create a file called components/content/ProseImg.vue, and it will automatically render all images (there is no need to install any tools, import it, or anything). In my case, I went from the default one (https://github.com/nuxt-modules/mdc/blob/main/src/runtime/components/prose/ProseImg.vue) to my own version (https://github.com/stared/stared.github.io/pull/2/files), with the template as follows:

<template>
  <figure v-if="caption">
    <component
      :is="imgComponent"
      :src="refinedSrc"
      :alt="alt"
      :width="width"
      :height="height"
    />
    <figcaption v-html="caption" />
  </figure>
  <component
    v-else
    :is="imgComponent"
    :src="refinedSrc"
    :alt="alt"
    :width="width"
    :height="height"
  />
</template>