vue中img的src属性绑定问题,显示图片错误

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

扫描二维码关注公众号，回复： 16457179 查看本文章