如何在循环刷新的本地图片展示页面中替换失效图片为默认图？

问题背景 #

我平时很少写JS，现在做了个电视端展示4张可更新图片的小项目，页面定期刷新获取新图的功能正常，但如果图片命名错误就会显示失效链接。需要添加检查逻辑，确保图片不存在时显示默认图。

之前尝试的onerror写法无效，用XMLHttpRequest检查状态码的方法因为是本地文件也没法正常工作。

修正后的代码 #

// 休眠函数
async function sleep(seconds) {
    return new Promise((resolve) => setTimeout(resolve, seconds * 1000));
}

async function setImage() {
    // 获取存放图片的容器
    const imageDiv1 = document.querySelector('.image1');
    const imageDiv2 = document.querySelector('.image2');
    const imageDiv3 = document.querySelector('.image3');
    const imageDiv4 = document.querySelector('.image4');

    // 定义默认图路径
    const defaultImage = 'default.png';
    // 定义各个业务图路径
    const imagePaths = {
        safety: "../Safety/Safety_current.png",
        quality: "../Quality/Quality_current.png",
        om: "../O&M/O&M_current.png",
        announcements: "../Announcements/Announcements_current.png"
    };

    // 创建图片元素并绑定错误处理逻辑
    function createImageElement(src) {
        const img = new Image();
        // 加载失败时切换到默认图
        img.onerror = function() {
            this.src = defaultImage;
            // 防止默认图也加载失败导致无限循环
            this.onerror = null;
        };
        img.src = src;
        return img;
    }

    // 初始化图片并添加到容器
    const image1 = createImageElement(imagePaths.safety);
    const image2 = createImageElement(imagePaths.quality);
    const image3 = createImageElement(imagePaths.om);
    const image4 = createImageElement(imagePaths.announcements);

    imageDiv1.appendChild(image1);
    imageDiv2.appendChild(image2);
    imageDiv3.appendChild(image3);
    imageDiv4.appendChild(image4);
    
    // 定期刷新图片
    while(true){
        await sleep(5); // 测试用5秒间隔
        // 更新图片src，加时间戳避免缓存
        image1.src = `${imagePaths.safety}?${new Date().getTime()}`;
        // 重新绑定onerror，更新src后原事件可能失效
        image1.onerror = function() {
            this.src = defaultImage;
            this.onerror = null;
        };

        image2.src = `${imagePaths.quality}?${new Date().getTime()}`;
        image2.onerror = function() {
            this.src = defaultImage;
            this.onerror = null;
        };

        image3.src = `${imagePaths.om}?${new Date().getTime()}`;
        image3.onerror = function() {
            this.src = defaultImage;
            this.onerror = null;
        };

        image4.src = `${imagePaths.announcements}?${new Date().getTime()}`;
        image4.onerror = function() {
            this.src = defaultImage;
            this.onerror = null;
        };
    }
}

// 页面加载完成后执行
window.onload = (event) => {
    setImage();
}

关键修改点 #

• 直接给每个Image对象绑定onerror事件：之前用getElementsByClassName的写法错误，一是该方法返回元素集合不能直接绑定事件，二是选择器多写了.（getElementsByClassName不需要前缀）。
• 放弃XMLHttpRequest方案：本地文件协议（file://）下浏览器会限制XHR请求，而图片的onerror原生事件不受此限制，是本地场景下的最优解。
• 防止错误循环：切换到默认图后，将onerror设为null，避免默认图也加载失败时反复触发错误逻辑。
• 简化DOM操作：无需每次刷新调用replaceChild替换自身，直接更新图片的src属性即可，元素已存在于DOM中。

内容的提问来源于stack exchange，提问作者loremIpsum