javascript - 为 html5 画布使用 javascript 同步图像加载器时使用 404 的默认图像

Question

如何将默认图像 (0.png) 添加到此图像加载器中，而不是在 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);
        });

标签： javascripthtmlhtml5-canvassynchronous

Answer 1

        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);
        });