vue.js Nuxt:显示静态文件夹中的本Map像

iqjalb3h  于 2023-03-03  发布在  Vue.js
关注(0)|答案(2)|浏览(185)

我刚开始用nuxt,我的静态文件夹在截图里,我一直在关注https://nuxtjs.org/guide/assets/#static
我有一个vuetify carousel组件,它可以很好地使用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>

但是现在当我运行dev服务器的时候,我得到了一个轮播图像的空白屏幕。其他带有url的图像工作得很好。
检查浏览器中的空白元素,我看到:

如何显示此图像?

watbbzwu

watbbzwu1#

您不需要指定静态文件夹,只需执行以下操作即可:

src: '/52lv.PNG'
w51jfk4q

w51jfk4q2#

除了这个问题,如果我们将它在'~assets/images/521v.PNG '?
而不是这样做

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

这样做

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

你可以这样使用它:

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

相关问题