【Vue】vue中img的src属性绑定问题
问题:img的src属性填写的图片地址,可以正常渲染,但是一旦利用绑定:src属性的时候,图片就加载失败了需求:鼠标移入切换图片上一位前端小哥哥,没做这个交互,我接手后加上去,很简答的交互,我替换图片的时候准备三元判断,src需要属性绑定,于是发现同样的地址,我放上去图片就是加载不出来,图片加载不出来,那肯定是地址问题了(插一句:上一位大佬文件结构可能不规范),一般都是static存放...
问题: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">展示即可。
更多推荐
所有评论(0)