Определить, когда изображение не загружается в Javascript

Есть ли способ определить, ведет ли путь к изображению к фактическому изображению, т.е. определить, когда изображение не загружается в Javascript.

Для веб-приложения я анализирую файл xml и динамически создаю HTML-изображения из списка путей к изображениям. Некоторые пути к изображениям могут больше не существовать на сервере, поэтому я хочу корректно завершить работу, определив, какие изображения не загружаются, и удалив этот элемент HTML img.

Обратите внимание, что решения JQuery нельзя будет использовать (начальник не хочет использовать JQuery, да, я знаю, не заставляйте меня начинать). Я знаю способ в JQuery определять, когда изображение загружено, но не то, не удалось ли это сделать.

Мой код для создания элементов img, но как я могу определить, приводит ли путь img к неудачной загрузке изображения?

var imgObj = new Image();  // document.createElement("img");
imgObj.src = src;

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

function testImage(URL) {
    var tester=new Image();
    tester.onload=imageFound;
    tester.onerror=imageNotFound;
    tester.src=URL;
}

function imageFound() {
    alert('That image is found and loaded');
}

function imageNotFound() {
    alert('That image was not found.');
}

testImage("http://foo.com/bar.jpg");

И мои соболезнования боссу, устойчивому к jQuery!

Ответ хорош, но он вызывает одну проблему. Всякий раз, когда вы назначаете onloadили onerrorнапрямую, он может заменить ранее назначенный обратный вызов. Вот почему есть хороший метод, который «регистрирует указанный слушатель в EventTarget, который он вызвал», как говорят в MDN . Вы можете зарегистрировать любое количество слушателей на одном и том же мероприятии.

Позвольте немного переписать ответ.

function testImage(url) {
    var tester = new Image();
    tester.addEventListener('load', imageFound);
    tester.addEventListener('error', imageNotFound);
    tester.src = url;
}

function imageFound() {
    alert('That image is found and loaded');
}

function imageNotFound() {
    alert('That image was not found.');
}

testImage("http://foo.com/bar.jpg");

Поскольку процесс загрузки внешних ресурсов является асинхронным, было бы еще лучше использовать современный JavaScript с обещаниями, такими как следующие.

function testImage(url) {

    // Define the promise
    const imgPromise = new Promise(function imgPromise(resolve, reject) {

        // Create the image
        const imgElement = new Image();

        // When image is loaded, resolve the promise
        imgElement.addEventListener('load', function imgOnLoad() {
            resolve(this);
        });

        // When there's an error during load, reject the promise
        imgElement.addEventListener('error', function imgOnError() {
            reject();
        })

        // Assign URL
        imgElement.src = url;

    });

    return imgPromise;
}

testImage("http://foo.com/bar.jpg").then(

    function fulfilled(img) {
        console.log('That image is found and loaded', img);
    },

    function rejected() {
        console.log('That image was not found');
    }

);

Это:

<img onerror="this.src='/images/image.png'" src="...">

/**
 * Tests image load.
 * @param {String} url
 * @returns {Promise}
 */
function testImageUrl(url) {
  return new Promise(function(resolve, reject) {
    var image = new Image();
    image.addEventListener('load', resolve);
    image.addEventListener('error', reject);
    image.src = url;
  });
}

return testImageUrl(imageUrl).then(function imageLoaded(e) {
  return imageUrl;
})
.catch(function imageFailed(e) {
  return defaultImageUrl;
});

jQuery + CSS для img

С jQuery это работает для меня:

$('img').error(function() {
    $(this).attr('src', '/no-img.png').addClass('no-img');
});

И я могу использовать это изображение везде на моем веб-сайте, независимо от его размера, с помощью следующего свойства CSS3:

img.no-img {
    object-fit: cover;
    object-position: 50% 50%;
}

СОВЕТ 1: используйте квадратное изображение размером не менее 800 x 800 пикселей.

СОВЕТ 2: для портрета людей используйтеobject-position: 20% 50%;

CSS только для background-img

Для отсутствующих фоновых изображений я также добавил следующее в каждое background-imageобъявление:

background-image: url('path-to-image.png'), url('no-img.png');

ПРИМЕЧАНИЕ: не работает для прозрачных изображений.

Сторона сервера Apache

Другое решение - обнаружить отсутствующее изображение с помощью Apache перед отправкой в ​​браузер и заменить его содержимым no-img.png по умолчанию.

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} /images/.*\.(gif|jpg|jpeg|png)$
RewriteRule .* /images/no-img.png [L,R=307]

Вот функция, которую я написал для другого ответа: Javascript Image Url Verify . Я не знаю , если это именно то , что вам нужно, но он использует различные методы , которые вы могли бы использовать , которые включают в себя обработчик onload, onerror, onabortи общий тайм - аут.

Поскольку загрузка изображения является асинхронной, вы вызываете эту функцию со своим изображением, а затем через некоторое время она вызывает ваш обратный вызов с результатом.

как показано ниже:

var img = new Image(); 
img.src = imgUrl; 

if (!img.complete) {

//has picture
}
else //not{ 

}