vue在data中定义图片相对路径:

data() {
    return {
      active: 1,
      icon: {
        active: "../assets/images/home-selected.png",
        inactive: "../assets/images/home.png"
      }
    };
  }

页面使用vant的标签栏自定义图标:

<van-tabbar v-model="active">
      <van-tabbar-item info="3">
        <!-- <span>首页</span> -->
        <img slot="icon" slot-scope="props" :src="props.active ? icon.active : icon.inactive" />
      </van-tabbar-item>
      <van-tabbar-item icon="search">标签</van-tabbar-item>
      <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
    </van-tabbar>

结果图片没有在页面上显示,

解决办法:

1:使用绝对路径,域名形式:https://

2:使用require:

data() {
    return {
      active: 1,
      icon: {
        active: require("../assets/images/home-selected.png"),
        inactive: require("../assets/images/home.png")
      }
    };
  }

Logo

前往低代码交流专区

更多推荐