web图片加载异常处理方案

274 阅读1分钟

By CSS

通过给绝对定位伪元素设置背景图的方式的模拟添加默认图,仅Chromium浏览器(Chrome/Opera/Edge)支持

content: "";
position: absolute;
top: 0;
left: 0;
width: inherit;
height: inherit;
background-image: url(xxx);

By JavaScript

异常监听,手动设置默认图

function inserted($el, selectors = 'img', defaultImage) {
  const $imgs = $el.querySelectorAll(selectors);
  Array.from($imgs).forEach($img => {
    $img.onerror = function () {
      this.src = defaultImage;
      this.onerror = null;       // 只执行一次,防止网络出错时循环执行onerror事件
    };
  });
},