Визначте, коли зображення не завантажується у Javascript

Чи є спосіб визначити, чи веде шлях зображення до фактичного зображення, тобто виявити, коли зображення не завантажується в Javascript.

Для веб-програми я розбираю XML-файл і динамічно створюю HTML-зображення із списку шляхів зображення. Деякі контури зображень можуть більше не існувати на сервері, тому я хочу вийти з ладу, виявивши, які зображення не завантажуються та видаливши цей елемент імгнення HTML.

Зверніть увагу, що рішення 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 х 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 URL Urli Verify . Я не знаю , якщо це саме те , що вам потрібно, але він використовує різні методи , які ви могли б використовувати , які включають в себе обробник onload, onerror, onabortі загальний тайм - аут.

Оскільки завантаження зображення асинхронне, ви викликаєте цю функцію зі своїм зображенням, а потім вона викликає зворотний дзвінок десь пізніше з результатом.

так само, як нижче:

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

if (!img.complete) {

//has picture
}
else //not{ 

}