对于图片较多的项目来说,网络比较慢的话,图片就会加载不出来而导致页面乱了,或者某张图片在服务被删了,默认的样式也是很丑的,所以我们有必要对其优化一波。
方案一:
const error_img = require('../assets/img_zhanwei@3x.png');
var loadImg=function(imgSrc){
return 'this.onload=null;this.src='+'"'+imgSrc+'";';
};
var errorImg=function(){
return 'this.onload=null;this.src='+'"../../static/img/avatar13@3x.png";'
};
<img :src="_default.error_img" :onload="_default.loadImg(item.base_pic)" :onerror="_default.errorImg()">
先给img的src绑定一个默认的占位图,然后onload里面返回真正的图片地址,在onerror里返回占位图片。
1、本在打算在onload里面通过new Img()获得图片宽高来判断图片是否可用,这样就省去了onerror事件,但是获取图片宽高要放在onload里面,形成了异步函数无法直接return
2、就是在事件中,要加上this.οnlοad=null,否则会出现重复调用的问题。
如果你觉得这样写太麻烦,也可以给所有的img标签添加时间,而不是像我这样的一个一个添加。
如果有其他方案,大家可以在下方发表自己的看法,我也会在这里补充