Nuxt：显示静态文件夹中的本地图像

Question

我开始使用 nuxt。我的静态文件夹在屏幕截图中。我一直在关注https://nuxtjs.org/guide/assets/#static

我有一个 vuetify 轮播组件，它可以很好地使用 url 作为 src。现在我想尝试提供本地静态文件。我试过了：

    <template>
  <v-carousel>
    <v-carousel-item v-for="(item,i) in items" :key="i" :src="item.src"></v-carousel-item>
  </v-carousel>
</template>


    <script>

export default {
  data () {
    return {
      items: [
        {
          src: '/static/52lv.PNG'
        },
        {
          src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg'
        },
        {
          src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg'
        },
        {
          src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg'
        }
      ]
    }
  }
}
</script>

但是现在，当我运行开发服务器时，我会看到该轮播图像的空白屏幕。其他带有网址的图片都可以正常工作。

检查浏览器中的空白元素，我看到了：

如何显示此图像？

Answer 1

除了这个问题，如果我们将它放在 '~assets/images/521v.PNG' 中？

而不是这样做

 export default {   data () {
     return {
       items: [
         {
           src: '/static/52lv.PNG'
         },

这样做

   src: `${require(`~assets/images/521v.PNG`)}`

你会这样使用它：

  <img :src="items.src"/>

Answer 2

您不需要指定静态文件夹，您只需这样做：

  src: '/52lv.PNG'