vantUI底部tabbar自定义引用img图标

vantUI底部tabbar自定义引用img图标

---

案例截图：

<van-tabbar v-model="active" @change="onChange" route>
  <van-tabbar-item icon="home-o" to="/attendanceMng/attendanceAnalysis">首页</van-tabbar-item>
  <van-tabbar-item icon="apps-o" to="/attendanceMng/attendanceDetail/moreDetail">更多</van-tabbar-item>
  <!-- <van-tabbar-item icon="home-o" to="/attendanceMng/report/reportDetail">统计</van-tabbar-item> -->
  <van-tabbar-item to="/attendanceMng/report/reportDetail">
      <span>统计</span>
      <template #icon="props">
        <img :src="props.active ? icon.active : icon.inactive" />
      </template>
    </van-tabbar-item>
  <van-tabbar-item icon="manager-o" to="/attendanceMng/attendanceDetail/attendanceMy">我的</van-tabbar-item>
</van-tabbar>

export default {
    
    
  name: "myDetail",
  data() {
    
    
    return {
    
    
      icon: {
    
    
      	active: 3,//当前激活的对象
      	//本地路径使用require请求图片
        active: require('../../../../assets/tabbar/tongji_on.png'),
        inactive: require('../../../../assets/tabbar/tongji.png'),
      },
    }
  },
  methods:{
    
    
    onChange(index){
    
    
      this.active=index;
    },
  }
}

---

注意 · 显示正常：

关键词require的使用，如上文提到的：

active: require('../../../../assets/tabbar/tongji_on.png'),

---

完结。