如何设置图片资源加载失败后的默认图片

原理:

        当一个资源加载失败或无法使用时，会在Element对象上触发error事件。例如当脚本执行错误、或图片无法找到或图片无效时。

        当图片加载资源失败时，通过error事件，给img对象设置一个默认图片即可

        目录中只有error.webp一个图片，所以设置img的src="2.png"是找不到资源的；自然会触发error事件

代码:

    <div>
        <img src="2.png" id="ErrorImg" />
    </div>
    <script>
        function errorEmmiter(e) {
            var elem = e.target;
            elem.src="error.webp"
        }
        let img=document.getElementById('ErrorImg');
        img.addEventListener("error", errorEmmiter, true);
    </script>

给document上下文中的所有图片统一设置:

        function errorEmmiter(e) {
            var elem = e.target;
            if (elem.tagName.toLowerCase() == "img") {
                elem.src ='error.webp';
            }
        }
        document.addEventListener("error", errorEmmiter, true);