vue中data中定义图片相对路径页面不显示问题
vue在data中定义图片相对路径:data() {return {active: 1,icon: {active: "../assets/images/home-selected.png",inactive: "../assets/images/home.png"}};}页面使用va...
·
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")
}
};
}
更多推荐
已为社区贡献10条内容
所有评论(0)