Vuetify - 图库答案

【问题标题】：Vuetify - GalleryVuetify - 图库
【发布时间】：2020-02-09 12:50:45
【问题描述】：

我正在尝试使用 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>

图片未显示，我收到此错误：[Vuetify] 图片加载失败

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

非常感谢

【问题讨论】：

标签： vue.js gallery vuetify.js

【解决方案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"}
      ]
    }
}

【讨论】：

可以添加项目的文件夹结构吗？！
我的图片在 src/assets 里面。在 src 文件夹中，我有一个包含所有组件文件的 components 文件夹，我没有移动任何文件夹，它是一个刚刚使用 Vue cli 创建的新项目。

【解决方案2】：

src 属性应该是字符串，所以去掉 require() 函数：{source: "../assets/image.jpg", alt:"asd"}

【讨论】：