【Vue】vue中img的src属性绑定问题

问题:img的src属性填写的图片地址,可以正常渲染,但是一旦利用绑定:src属性的时候,图片就加载失败了
需求:鼠标移入切换图片

这里写图片描述
上一位前端小哥哥,没做这个交互,我接手后加上去,很简答的交互,我替换图片的时候准备三元判断,src需要属性绑定,于是发现同样的地址,我放上去图片就是加载不出来,图片加载不出来,那肯定是地址问题了(插一句:上一位大佬文件结构可能不规范),一般都是static存放静态文件,但是他自己创建了一个stalic(哭笑.gif)

上代码:

<img src="../../../src/stalic/font/arrow0-0.png" alt="">  //上一位的
<img :src="Bol == 1 ? imgUrl : imgUrl2" alt="">     //我的   data里面是:
imgUrl: '../../../src/stalic/font/arrow0.png',
imgUrl2: '../../../src/stalic/font/arrow0-0.png'

但是浏览器并没有渲染出来我的图片,而他的图片可以正常渲染,同样的路径,为什么我的不显示? 而且浏览器还没有报错。

原因:这里使用的是本地路径,想起来static静态文件夹,于是我将图片放入到static文件夹中
这里写图片描述
再次修改路径:

imgUrl: ./static/arrow0.png,
imgUrl2: ./static/arrow0-0.png

或者,Common写法

imgUrl: require('../../../src/static/font/arrow0.png'),
imgUrl2: require('../../../src/static/font/arrow0-0.png')

图片总算是出来了, 然后总结几个可以解决本地图片路径显示不出来的问题:

1.把图片放在src同级的static文件夹下。
2.把图片放在cdn上,把网络地址存在imgUrl里,然后直接<img :src="imgUrl">去展示。
3.图片放在assets文件夹,然后在data里面require进图片

data() {
imgUrl:require('./assets/logo.png')
}

然后放入<img :src="imgUrl">展示即可。

  • 58
    点赞
  • 100
    收藏
    觉得还不错? 一键收藏
  • 23
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 23
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值