查找批量回退映像解决方案

Question

目前，在每个图像上我都有这样的东西：

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

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

我认为。。。我看到了一个解决方案，就像我一年前描述的那样......但是我找了很远很远，没有运气。

Answer 1

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

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);
}

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

Answer 2

当然，只需遍历所有以 .svg 结尾的img并将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);
  });