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