Блог

Я использую nuxt-responsive-loader для создания изображений srcset, когда я использую

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

он отображает img в srcset, но когда я пытаюсь загрузить через свой файл 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
  

Используйте «требовать» и синтаксис, подобный этому

 <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