使用Vuetify构建图片画廊时图片加载失败问题求助

嘿，我帮你排查出两个关键问题，这就是图片加载失败的核心原因：

1. require() 被错误包裹成字符串 #

你在data里把require()调用放在了双引号中，这会让它变成一个普通字符串，而不是执行这个函数去获取图片的实际资源路径。Webpack需要通过require()来正确解析assets目录下的资源，所以必须去掉引号直接执行函数：

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"} 
    ] 
  } 
}

2. 嵌套v-for的逻辑混乱 #

你当前的代码是先循环生成12个<v-col>，然后每个列里又遍历所有图片，这会导致每个列都重复显示全部3张图片，既不符合画廊的布局逻辑，也会造成不必要的渲染浪费。正确的做法是直接遍历images数组，给每张图片分配一个<v-col>：

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

额外验证点 #

确认你的组件文件和assets文件夹的相对路径是否正确：如果组件位于src/components/xxx.vue，那么../assets的路径是正确的（因为assets在src根目录下）。如果路径无误，修正上述两个问题后图片就能正常加载了。

内容的提问来源于stack exchange，提问作者Dave851