Mendeteksi saat gambar gagal dimuat di Javascript

Apakah ada cara untuk menentukan apakah jalur gambar mengarah ke gambar yang sebenarnya, yaitu mendeteksi ketika gambar gagal dimuat di Javascript.

Untuk aplikasi web, saya mengurai file xml dan secara dinamis membuat gambar HTML dari daftar jalur gambar. Beberapa jalur gambar mungkin tidak lagi ada di server, jadi saya ingin gagal dengan baik dengan mendeteksi gambar mana yang gagal dimuat dan menghapus elemen img HTML itu.

Catatan solusi JQuery tidak akan dapat digunakan (bos tidak ingin menggunakan JQuery, ya saya tahu jangan mulai saya). Saya tahu cara di JQuery untuk mendeteksi saat gambar dimuat, tetapi tidak mengetahui apakah gambar tersebut gagal.

Kode saya untuk membuat elemen img tetapi bagaimana saya bisa mendeteksi jika jalur img mengarah ke gambar yang gagal dimuat?

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

Anda bisa mencoba kode berikut. Saya tidak dapat menjamin kompatibilitas browser, jadi Anda harus mengujinya.

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

Dan simpati saya untuk bos tahan jQuery!

Jawabannya bagus, tapi ini menimbulkan satu masalah. Setiap kali Anda menetapkan onloadatau onerrorsecara langsung, itu mungkin menggantikan panggilan balik yang telah ditetapkan sebelumnya. Itulah mengapa ada metode bagus yang "mendaftarkan pendengar yang ditentukan di EventTarget tempat itu dipanggil" seperti yang mereka katakan di MDN . Anda dapat mendaftarkan pendengar sebanyak yang Anda inginkan di acara yang sama.

Izinkan saya menulis ulang jawabannya sedikit.

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

Karena proses pemuatan sumber daya eksternal tidak sinkron, akan lebih baik jika menggunakan JavaScript modern dengan promise, seperti berikut ini.

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

);

Ini:

<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 untuk img

Dengan jQuery, ini berfungsi untuk saya:

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

Dan saya dapat menggunakan gambar ini di mana pun di situs web saya terlepas dari ukurannya dengan properti CSS3 berikut:

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

TIPS 1: gunakan gambar persegi berukuran minimal 800 x 800 piksel.

TIPS 2: untuk digunakan dengan potret orang , gunakanobject-position: 20% 50%;

CSS hanya untuk background-img

Untuk gambar latar belakang yang hilang, saya juga menambahkan yang berikut pada setiap background-imagedeklarasi:

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

CATATAN: tidak berfungsi untuk gambar transparan.

Sisi server Apache

Solusi lain adalah mendeteksi gambar yang hilang dengan Apache sebelum dikirim ke browser dan menggantinya dengan konten default no-img.png.

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

Berikut adalah fungsi yang saya tulis untuk jawaban lain: Verifikasi Url Gambar Javascript . Saya tidak tahu apakah itu apa yang Anda butuhkan, tetapi menggunakan berbagai teknik yang Anda akan menggunakan yang meliputi penangan untuk onload, onerror, onabortdan timeout umum.

Karena pemuatan gambar tidak sinkron, Anda memanggil fungsi ini dengan gambar Anda dan kemudian memanggil panggilan balik Anda beberapa saat kemudian dengan hasilnya.

seperti di bawah ini:

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

if (!img.complete) {

//has picture
}
else //not{ 

}