how do I replace an image with broken link to a default image?


I am not normally one to write JS, but I need this for a little project for my work that displays 4 images on some tv’s that management can update. I created a little site that displays the images and need it to refresh the image with new slides every so often as they are updated. This all works fine, but if someone names the image incorrectly it will be a broken link. How can I add a check to see if the image exists and if it doesn’t return a default image.

//sleep function
async function sleep(seconds) {
    return new Promise((resolve) => setTimeout(resolve, seconds * 1000));

async function setImage() {
    //get divs by class name
    const imageDiv1 = document.querySelector('.image1');
    const imageDiv2 = document.querySelector('.image2');
    const imageDiv3 = document.querySelector('.image3');
    const imageDiv4 = document.querySelector('.image4');

    //define const images
    const image0 = new Image();
    const image1 = new Image();
    const image2 = new Image();
    const image3 = new Image();
    const image4 = new Image();

    //define paths
    const defaultImage = 'default.png';
    const safteyImage = "..\\Safety\\Safety_current.png";
    const qualityImage = "..\\Quality\\Quality_current.png";
    const omImage = "..\\O&M\\O&M_current.png";    
    const announcementsImage = "..\\Announcements\\Announcements_current.png";    

    //set images to paths
    image0.src = defaultImage;
    image1.src = safteyImage; 
    image2.src = qualityImage;
    image3.src = omImage;
    image4.src = announcementsImage;

    //add images to canvas
    //infinite loop of updating image.
        await sleep(5); //only 5 seconds right now for testing.
            image1.src = safteyImage + "?" + new Date().getTime();
            image2.src = qualityImage + "?" + new Date().getTime();
            image3.src = omImage + "?" + new Date().getTime();
            image4.src = announcementsImage + "?" + new Date().getTime();
            imageDiv1.replaceChild(image1, image1);
            imageDiv2.replaceChild(image2, image2);
            imageDiv3.replaceChild(image3, image3);
            imageDiv4.replaceChild(image4, image4);

//call setImage on load
window.onload = (event) => {

I am looking for a way to switch it to a default image within the while loop so it is always checking if it exists or not.

document.getElementsByClassName('.image1').onerror = function() {
    document.getElementsByClassName('.image1').src = "default.png";

doesnt seem to work for me. I also found a function that checks the status code, but since this is looking into a local file I dont this this approach works, which it didnt.

//check if an image exists, (non working)
function imageExists(image_url){
    var request = new XMLHttpRequest();"GET", image_url, true);
    request.onload = function() {
        imageStatus = request.status;
        if(request.status == 200) {
            console.log('it exists');

>Solution :

You can listen for the "error" event on the document itself. This obviates the need to attach event listeners on each individual image.

document.addEventListener('error', e => { = 'default.png';
}, true);

Leave a Reply Cancel reply