证明-画廊

Question

我正在试着用vuetify做一个画廊。这是我的代码

 data(){
    return{
      images:[
          {source: "require('../assets/image.jpg')", alt:"asd"},
          {source: "require('../assets/image01.jpg')", alt:"sds"},
          {source: "require('../assets/img-sydney.jpg')", alt:"asdf"}
      ]
    }
}

<v-row>
     <v-col v-for="n in 12" :key="n" cols="4">
        <v-img v-for="image in images" :key="image.alt" :src="image.source" :alt="image.alt"></v-img>
     </v-col> 
 </v-row>

图像未显示，我收到此错误:验证图像加载失败

有人能帮我理解这个问题吗？这是路径问题吗？我的图像在assets文件夹中

非常感谢

Answer 1

试试这个：

data(){
    return{
      images:[
          {source: "require('@/assets/image.jpg')", alt:"asd"},
          {source: "require('@/assets/image01.jpg')", alt:"sds"},
          {source: "require('@/assets/img-sydney.jpg')", alt:"asdf"}
      ]
    }
}

Answer 2

src属性应该是字符串，因此删除require()函数：{source: "../assets/image.jpg", alt:"asd"}