优雅地使用 JavaScript 处理图片加载失败问题

有个同事写的页面中如果图片加载失败会出现那种裂图的标志，然后想去掉那个裂图旁边的边框。

我和我同事用了各种各样的骚方法去找那个边框，愣是找不到。没错，那东西应该就是找不到的，也不建议用各种奇葩 css 去调试。

还是用 js 优雅的处理裂图吧。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <!-- 方法 1，移除裂图 -->
    <img src="" alt="" onerror="this.parentNode.removeChild(this)" />
    <!-- 方法 2，换一张图片，当然你也可以自定义方法，比如将图片隐藏，替换图片为文本也可以 -->
    <img src="2.jpg" alt="" onerror="onImgErrorReplageImage(this);" />
    <script>
      function onImgErrorReplageImage(params) {
        console.log('图裂啦，替换一张图片', params);
        params.onerror = '';
        params.src = '/1.png';
        return true;
      }
    </script>
  </body>
</html>