vue-cli3+bootstrap-vue加载本地图片失败
在本地模拟加载图片,如果不绑定src
是可以显示图片的:
<b-img-lazy width="30" height="30" alt="ico" src="~@/assets/img/logo.jpg"></b-img-lazy>
但是,绑定数据后就不行了:
<b-img-lazy width="30" height="30" alt="ico" :src="item.logo"></b-img-lazy>
可以说使用绝对路径且不进行数据绑定是可以的,我的地址并没错。看了bootstrap-vue官网给的解决方案,我照做了也重启服务了但仍没有作用:
方案链接:https://bootstrap-vue.js.org/...
module.exports = {
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
options.transformAssetUrls = {
img: 'src',
image: 'xlink:href',
'b-img': 'src',
'b-img-lazy': ['src', 'blank-src'],
'b-card': 'img-src',
'b-card-img': 'src',
'b-card-img-lazy': ['src', 'blank-src'],
'b-carousel-slide': 'img-src',
'b-embed': 'src'
}
return options
})
}
}
或者这样修改后也无效:
<b-img-lazy width="30" height="30" alt="ico" :src="'assets/'+item.logo"></b-img-lazy>
我的图片放在src/assets/img
里,无解了,网上也找不到解决这种问题答案啊
帮忙看一下,谢谢了
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
item.logo
里面是这么个东西,他也不知道你要干嘛呀。你可以尝试
img = require(@/assets/img/logo.jpg)
然后:src="img"
使用你引入图片