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": "景点门票"
}
]这样图片就可以成功引入了
感谢各位的阅读！看完上述内容，你们对vue data中定义图片相对路径页面不显示怎么办大概了解了吗？希望文章内容对大家有所帮助。如果想了解更多相关文章内容，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
