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

您无需指定静态文件夹，只需执行以下操作即可：

  src: '/52lv.PNG'

Answer 2

如果不是在“〜assets / images / 521v.PNG”中找到静态文件夹图片，那该怎么办？

谢谢

Answer 3

除了这个问题之外，我们是否可以在'〜assets / images / 521v.PNG'中使用它？

而不是这样做

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

执行此操作

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

，您将像这样使用它：

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