vue中动态加载img

时间：2022-01-31 06:54:33

想实现动态加载图片，当点击“首页”时，图片变色

代码如下：

      <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

相关文章