如何在Nuxt3中用nuxt/content正确渲染Markdown的标题与图片

问题描述 #

在Nuxt3项目中尝试读取content/home/brands.md的元数据（标题和图片列表）并在组件中渲染，但内容无法正常显示。相关文件代码如下：

brands.md 文件内容 #

---
title: A selection of our customers

images:
  - /images/brands/brand-1.png
  - /images/brands/brand-2.png
  - /images/brands/brand-3.png
  - /images/brands/brand-4.png
---

index.vue 页面代码 #

<template>
  <HeroSection />
  <BrandSection :brands="brands" />
</template>

<script setup>
// Fetch brands data from content directory
const { data: brands } = await useAsyncData('brands', () => queryContent('/home/brands').findOne())
console.log(brands.value)
</script>
<style scoped>
</style>

BrandSection.vue 组件代码 #

<template>
    <div class="bg-white-secondary">
        <div class="max-w-[1440px] mx-auto px-[100px] py-[80px]">
            <h2 class="text-2xl font-medium mb-8">{{ brands?.title }}</h2>
            <div class="flex gap-[100px] items-center justify-center">
                <NuxtImg 
                    v-for="(image, index) in brands?.images" 
                    :key="index"
                    :src="image" 
                    :alt="'Brand logo'"
                    class="h-[50px] object-contain" 
                />
            </div>
        </div>
    </div>
</template>
<script setup>
const {brands} = defineProps(['brands'])
</script>
<style scoped></style>

排查与修复步骤 #

1. 确认Nuxt Content模块已安装并配置 #

Nuxt Content是读取content目录文件的核心依赖，需完成以下操作：

• 执行安装命令：npm install @nuxt/content 或 yarn add @nuxt/content
• 在nuxt.config.ts中添加模块配置：

export default defineNuxtConfig({
  modules: ['@nuxt/content'],
  content: {
    // 默认读取content目录，若有自定义路径需调整
    // src: 'content'
  }
})

2. 验证数据获取路径与错误捕获 #

queryContent('/home/brands')对应content/home/brands.md，可添加错误捕获确认数据是否正常获取：

<script setup>
const { data: brands, error } = await useAsyncData('brands', () => queryContent('/home/brands').findOne())
if (error.value) {
  console.error('获取品牌数据失败:', error.value)
}
</script>

若控制台报错找不到文件，检查content目录结构是否正确，确保home文件夹和brands.md存在。

3. 修复图片路径与组件数据处理 #

• 确保图片实际存放在public/images/brands/目录下（Nuxt3静态资源根目录为public），否则会出现404。
• 给组件添加props默认值，避免数据未加载时的空值问题：

<script setup>
const props = defineProps({
  brands: {
    type: Object,
    default: () => ({ title: '', images: [] })
  }
})
</script>

• 模板中添加v-if确保数据加载完成后再渲染：

<template>
    <div class="bg-white-secondary" v-if="brands">
        <div class="max-w-[1440px] mx-auto px-[100px] py-[80px]">
            <h2 class="text-2xl font-medium mb-8">{{ brands.title }}</h2>
            <div class="flex gap-[100px] items-center justify-center">
                <NuxtImg 
                    v-for="(image, index) in brands.images" 
                    :key="index"
                    :src="image" 
                    :alt="`Brand logo ${index + 1}`"
                    class="h-[50px] object-contain" 
                />
            </div>
        </div>
    </div>
</template>

4. 确保异步数据服务端预渲染 #

在index.vue中给useAsyncData添加server选项，确保服务端预渲染数据：

const { data: brands } = await useAsyncData('brands', () => queryContent('/home/brands').findOne(), {
  server: true
})

验证修复 #

完成以上步骤后重启Nuxt服务，检查控制台是否有报错，同时查看页面是否正确渲染标题和品牌图片。若仍有问题，检查浏览器网络请求确认图片状态，或打印brands.value确认数据是否正确传递。

内容的提问来源于stack exchange，提问作者Prongs