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

文章探讨了在Vue项目中,图片路径配置导致的显示问题。作者对比了直接写入图片路径与通过属性绑定方式的不同效果,揭示了static文件夹的重要性,并提供了三种解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

问题: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">展示即可。

评论 23
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值