vue中動態加載img

想實現動態加載圖片，當點擊“首頁”時，圖片變色

代碼如下：

      <mt-tabbar v-model="selected" fixed class="border-1px-top">
        <mt-tab-item id="首頁" >
          <img :src="imgs.img1" slot="icon">首頁
        </mt-tab-item>

 imgs:{
          'img1': "../assets/icon/index.png",
          // 'img1': "../assets/icon/indexchoose.png",
          'img2': "../assets/icon/brand.png",
          'img3': "../assets/icon/cart.png",
          'img4': "../assets/icon/me.png
        },

圖片一直加載不出來，

以為是路徑問題，但是不使用動態加載<img src="../assets/icon/index.png" slot="icon">圖片是能正常出來的。

這就很納悶了，搜索了半天，發現原來vue中動態加載圖片需要使用require引用資源的，於是改代碼為以下，OK了

 imgs:{
          'img1': require("../assets/icon/index.png"), // 'img1': "../assets/icon/indexchoose.png", 'img2': require('../assets/icon/brand.png'), 'img3': require("../assets/icon/cart.png"), 'img4': require("../assets/icon/me.png") },

 

參考：

https://blog.csdn.net/qq_33744228/article/details/81319485

https://blog.csdn.net/aliven1/article/details/80453213