如何从markdown在Nuxtjs中添加渲染的相对img路径

Question

我正在使用nuxt响应加载程序来获得srcset图像，当我使用时

<img class="card-img-top" :srcset="require('~/assets/nuxt2.png').srcSet"  alt="Sample image" />

它在srcset中呈现img，但当我试图通过我的markdown文件动态加载时，它没有，

<img class="card-img-top" :srcset="require(article.img).srcSet"  alt="Sample image" />

和给出的错误，无法找到模块~/assets/nuxt2.png。

注意：我使用的是asyncData

<script>
export default {
async asyncData({ $content, params }) {
const article = await $content('articles', params.slug).fetch()
console.log(params)
const [prev, next] = await $content('articles')
.only(['title', 'slug'])
.sortBy('createdAt', 'asc')
.surround(params.slug)
.fetch()
return { article, prev, next }
}
</script>

我的第一个博客.md

title: How i started my developing career
description: 'This is a roadmap of todo list while starting with software developer in it field and excelling it.'
author: jerryyhank
img: ~/assets/nuxt2.png

Answer 1

使用"要求"；和类似的语法

<img class="card-img-top" :srcset="require('~/assets/'+article.img).srcSet" alt="Sample i/>

在My-First-blog.md中，只需添加img名称

title: How i started my developing career
description: 'This is a roadmap of todo list while starting with software developer in it field and excelling it.'
author: jerryyhank
img: nuxt2.png