vue之v-bind踩坑系列——绑定src
v-bind在绑定img标签中的src属性时,vue会把相对地址解析成字符串,而非路径所以会导致图片无法正常显示
无法生效的代码
`<tab-bar-item v-for="i in 4">
<img slot="item-icon" :src="'./assets/img/tabbar/'+tabbaricon[i-1]+'.svg'" alt="">
</tab-bar-item>`
data(){
return {
tabbaricon: ['home','category','shopcart','profile'],
}
},
这里是对应的路径是无法正常起作用的
更改的代码
`<tab-bar-item v-for="i in 4">
<img slot="item-icon" :src="require('./assets/img/tabbar/'+tabbaricon[i-1]+'.svg')" alt="">
</tab-bar-item>`
简单来说就是在src路径外面套一个require方法即可