使用 Nuxt v3 在 @nuxt/content (v2) markdown 文件中渲染 <NuxtImg>答案

【问题标题】：Rendering <NuxtImg> in @nuxt/content (v2) markdown file with Nuxt v3使用 Nuxt v3 在 @nuxt/content (v2) markdown 文件中渲染 <NuxtImg>
【发布时间】：2023-02-10 20:57:42
【问题描述】：

在带有 Nuxt v2 和 @nuxt/img (v0) 的先前版本的 @nuxt/content (1.x) 中，您过去可以在 Markdown 文件中编写：

content/example.md

<nuxt-img src="img/myImage.jpg"></nuxt-img>

在 Nuxt v3 世界中，使用最新的 @nuxt/content (2.2.1) 和 @nuxt/image-edge (1.0.0-27769790.4b27db3)，我在开发中运行时遇到此错误 (yarn run dev)：

[Vue warn]: Failed to resolve component: NuxtImg
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

难道我做错了什么？我需要使用新的 MDC 语法吗？是还不支持，还是禁用SSR时不支持（ssr: false）？

我知道/正在观看几张票：

@nuxt/image Nuxt 3 支持清单：https://github.com/nuxt/image/discussions/548
@nuxt/image feat：支持预渲染静态图像：https://github.com/nuxt/image/pull/614
@nuxt/content 支持@nuxt/image (v1): https://github.com/nuxt/content/issues/624

细节

package.json

"@nuxt/content": "^2.2.1",
"@nuxt/image-edge": "^1.0.0-27769790.4b27db3",
"nuxt": "^3.0.0-rc.13"

注意：@nuxt/image-edge 是新的 @nuxt/image v1 模块的开发中，它将与 Nuxt 3 一起使用。提到了 here。

nuxt.config.ts

export default defineNuxtConfig({
  ssr: false, // Use without SSR
  components: false // Disabled auto-import components
})

【问题讨论】：

不确定，但您可能需要将图像模块导入 modules 键？
@kissu 是的，我在docs: export default defineNuxtConfig({ modules: [ '@nuxt/image-edge', ] }) 中有它
@kissu 实际上，我在另一个页面上遇到了同样的错误，其中 .md 文件中有一个 <nuxt-link></nuxt-link> ...所以看起来默认的 Nuxt 3 组件还不能从 @nuxt/content 上下文访问吗？
我还会在这里询问在@nuxt/content (v2) 中使用组件的正确方法：github.com/nuxt/content/discussions/1663

标签： nuxtjs3

【解决方案1】：

nuxt：v3.1.2
@nuxt/内容：v2.4.2
@nuxt/图像边缘：1.0.0-27913696.5d122a3

解决方案：
使用以下内容创建文件components/content/ProseImg.vue：

<template>
  <nuxt-img v-bind="$attrs" />
</template>

用法file.md：

![Captain Jack Sparrow](/images/jack.png){height="800", quality="80", preload}

参考：https://github.com/nuxt/content/issues/390#issuecomment-1344593577

【讨论】：