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