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>
结果图⽚没有在页⾯上显⽰，
解决办法：
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="pe" @click="pe)">
<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": "景点门票"
qq密保手机}
]
这样图⽚就可以成功引⼊了
以上这篇vue 解决data中定义图⽚相对路径页⾯不显⽰的问题就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论