vue中data中定义图片相对路径页面不显示问题

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")
      }
    };
  }