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