Загрузка картинок через асинхронные коллбэки в JavaScript?

Необходимо асинхронно загрузить картинку из папки на компьютере. В коде предусмотрена возможность: если картинка не загружается, в консоль должна выбрасываться ошибка. Но в приведенном мною коде данный

if (!onerr) {
    err = null;
} else {
    err = 'Error loading image'; 
}

не срабатывает если я указываю имя не существующей картинки, а при указании правильного имени картинка грузится. Как можно исправить код чтоб данная ошибка появлялась в консоли при указании не существующей картинки? Вот код:

function loadImage(url, callback) {
    setTimeout(function() {
        let image = document.createElement('img');
        image.src = url;
        
        let err;
        let onerr = image.addEventListener('error', function() {
            console.log('Error loading image'); // текст ошибки
        });

        if (!onerr) {
            err = null;
        } else {
            err = 'Error loading image'; 
        }
        
        callback(image, err);
    }, 1000);
}

loadImage('/home/artemiy/JS/5.jpeg', function(image, err) {
    if (!err) {
        document.body.append(image);
    } else {
        console.log('Произошла ошибка: ' + err);
    }
});

Ответы (0 шт):