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

Logo

前往低代码交流专区

更多推荐