vue 中v-for img src 路径加载问题

            <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

猜你喜欢

转载自www.cnblogs.com/xmjs/p/12798066.html