Search code examples
javascripthtmlhtml5-canvassynchronous

Use a default image for 404s when using an javascript synchronous image loader for html5 canvas


How would I add a default image (0.png) into this image loader instead of it throwing an error on 404?

        var artArrayDef = ['player_art/' + p_me_gen + 'body' + me_race + '.png', 'player_art/head' + me_face + '.png'];
        var artArray01  = ['item_art/' + p_me_gen + me_chest + '.png', 'player_art/hair' + me_hair + '.png', 'item_art/' + me_helm + '.png', 'item_art/' + p_me_gen + me_legs + '.png', 'item_art/' + me_feet + '.png', 'item_art/' + me_hands + '.png', 'item_art/' + me_sleeves + '.png', 'item_art/' + me_about + '.png', 'item_art/' + me_hold + '.png', 'item_art/' + me_wield + '.png'];

        // Images for humanoid body and gear
        function loadImage_char(imagePath) {
            return new Promise((resolve, reject) => {
                let image = new Image();
                image.addEventListener("load", () => {
                    resolve(image);
                });
                image.addEventListener("error", (err) => {
                    reject(err);
                });
                image.src = 'https://www.example.com/interface/images/' + imagePath;
            });
        }

        let imageSources = [].concat(artArrayDef, artArray01);
        Promise.all(imageSources.map(i => loadImage_char(i))).then((images) => {
            images.forEach((image) => {
                meCtx.drawImage(image, 0, 0);
            });
        }).catch((err) => {
            console.error(err);
        });

Solution

  •         var artArrayDef = ['player_art/' + p_me_gen + 'body' + me_race + '.png', 'player_art/head' + me_face + '.png'];
            var artArray01  = ['item_art/' + p_me_gen + me_chest + '.png', 'player_art/hair' + me_hair + '.png', 'item_art/' + me_helm + '.png', 'item_art/' + p_me_gen + me_legs + '.png', 'item_art/' + me_feet + '.png', 'item_art/' + me_hands + '.png', 'item_art/' + me_sleeves + '.png', 'item_art/' + me_about + '.png', 'item_art/' + me_hold + '.png', 'item_art/' + me_wield + '.png'];
    
            // Images for humanoid body and gear
            function loadImage_char(imagePath) {
                return new Promise((resolve, reject) => {
                    let image = new Image();
                    image.addEventListener("load", () => {
                        resolve(image);
                    });
                    image.addEventListener("error", (err) => {
                        // Add the default image here <---
                        let defaultImg = new Image();
                        defaultImg.src = 'https://www.example.com/interface/images/item_art/0.png';
                        resolve(defaultImg);
                    });
                    image.src = 'https://www.example.com/interface/images/' + imagePath;
                });
            }
    
            let imageSources = [].concat(artArrayDef, artArray01);
            Promise.all(imageSources.map(i => loadImage_char(i))).then((images) => {
                images.forEach((image) => {
                    meCtx.drawImage(image, 0, 0);
                });
            }).catch((err) => {
                console.error(err);
            });