Question

我正在使用nuxt-sensitive-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

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

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

1 个答案: