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

Posted 2023-02-22

【中文标题】Nuxt：显示静态文件夹中的本地图像

【英文标题】：Nuxt: displaying local image from static folder

【发布时间】：2019-05-30 08:06:27

【问题描述】：

我开始使用 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>

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

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

如何显示此图像？

【参考方案1】：

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

而不是这样做

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

这样做

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

你会这样使用它：

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

【讨论】：

替代你可以只是<img :src="require(`~/assets/img/$image.jpg`)" />，如the documentation所示

【参考方案2】：

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

  src: '/52lv.PNG'