Question

目前，在每张图片上我都有类似的内容：

＆＃13;

<img src="img/hello.svg" onerror="this.src='img/hello.png';this.onerror=null;">

＆＃13;

如果发生错误，是否可以制作自动从.svg切换到不同格式的页宽代码？

我想......我看到了一年前可能已经描述过的解决方案......但是我已经搜索得很远，没有运气。

Answer 1

当然，只需遍历以img结尾的所有.svg并附加error个处理程序：

document.querySelectorAll('img[src$=".svg"]')
  .forEach((img) => {
    function errorListener () {
      img.removeEventListener('error', errorListener);
      img.src = img.src.replace(/src$/, 'png');
    }
    img.addEventListener('error', errorListener);
  });

Answer 2

您可以使用querySelectorAll选择src属性以.svg结尾的所有图片，并在每个图片上添加一个事件监听器：

＆＃13;

document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('img[src$=".svg"]').forEach(function(el) {
    console.log('el');
    el.addEventListener('error', changeImage);
  });
});

function changeImage(e) {
  e.target.src = e.target.src.slice(0, -4) + '.png';
  e.target.removeEventListener('error', changeImage);
}

＆＃13;

<img src="img/hello.svg">

＆＃13;

查找批量回退图像解决方案？

2 个答案: