如何从 Markdown 在 Nuxtjs 中的渲染上添加相对 img 路径？答案

【问题标题】：How to add relative img path on render in Nuxtjs from markdown?如何从 Markdown 在 Nuxtjs 中的渲染上添加相对 img 路径？
【发布时间】：2021-01-29 21:11:32
【问题描述】：

我正在使用 nuxt-responsive-loader 来获取 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>

My-First-blog.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

【问题讨论】：

标签： vue.js vuejs2 nuxt.js vuejs3

【解决方案1】：

使用“require”和这样的语法

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

在 My-First-blog.md 中，添加 te img name

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

【讨论】：