<el-col :span="12" v-for="(hot,index) in hot_box" :key="index"> <div class="grid-content bg-purple hot-box"> <img src="hot.im" alt /> </div> </el-col>
v-for下img src无法加载出图片,尝试了网上常用的几种方法:
1.v-bind:src="hot.im" 无效
2.v-bind:src="require(hot.im)"无效
3.最终有效结果:
<img :src="hot.im" alt />
script中:
hot_box: [ { im: require("./../../assets/hot1.png"), title: "", name: "", phone: "", address: "", city: "" } ]
原因:
assets文件在项目编译的过程中会被webpack处理解析为模块依赖
解决方法1.将图片放入static目录文件下,在这个目录下文件不会被被webpack解析。他会直接被复制到最终的打包目录(默认是dist/static)下,必须使用绝对路径引用这些文件。
2., 'src': require('../../assets/images/index/navlist01.png')在写路径时添加require。
参考链接 https://blog.csdn.net/m0_37605642/article/details/90447322