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

补充知识：Vue在data中存入静态图片地址，使用别名引入的方法

在项目开发中，icons的引入遇见了麻烦

在data中存入一组图片地址，并且循环渲染到组件上

<div class="icons-item" v-for="icon of list" :key="icon.type" @click="Jump(icon.type)">
 <img class="icons-img" :src="icon.imgUrl" />
 <p class="icons-desc">{{icon.desc}}</p>
</div>
data () {
 return {
  list: [
   {
    "type": "scenic",
    "imgUrl": 'assets/webIcons/scenic.png',
    "desc": "景点门票"
   }
  ]
 }
}

webpack已经配置了别名

resolve: {
 extensions: ['.js', '.vue', '.json'],
 alias: {
  'vue$': 'vue/dist/vue.esm.js',
  '@': resolve('src'),
  'styles': resolve('src/assets/styles'),
  'common': resolve('src/common'),
  'assets': resolve('src/assets')
 }
},

但是发现有问题

图片地址没有背正确的解析

解决办法

在html中 需要在别名前面加上 ~ 符号

<img src="~assets/webIcons/scenic.png" />

在js中，需要使用require('url')

list: [
   {
    "type": "scenic",
    "imgUrl": require('assets/webIcons/scenic.png'),
    "desc": "景点门票"
   }
  ]

这样图片就可以成功引入了

来源：https://blog.csdn.net/weixin_42545184/article/details/103130854