Rileva quando un'immagine non viene caricata in Javascript

C'è un modo per determinare se il percorso di un'immagine porta a un'immagine reale, cioè rilevare quando un'immagine non riesce a caricarsi in Javascript.

Per un'app Web, sto analizzando un file xml e creando dinamicamente immagini HTML da un elenco di percorsi di immagine. Alcuni percorsi delle immagini potrebbero non esistere più sul server, quindi desidero fallire con grazia rilevando quali immagini non vengono caricate ed eliminando quell'elemento HTML img.

Nota le soluzioni JQuery non potranno essere utilizzate (il capo non vuole usare JQuery, sì, lo so, non farmi iniziare). Conosco un modo in JQuery per rilevare quando un'immagine viene caricata, ma non se ha fallito.

Il mio codice per creare elementi img, ma come posso rilevare se il percorso img porta a un errore di caricamento dell'immagine?

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

Potresti provare il seguente codice. Tuttavia, non posso garantire la compatibilità del browser, quindi dovrai provarlo.

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

E le mie simpatie per il capo resistente a jQuery!

La risposta è carina, ma introduce un problema. Ogni volta che si assegna onloado onerrordirettamente, può sostituire la richiamata assegnata in precedenza. Ecco perché c'è un bel metodo che "registra l'ascoltatore specificato sull'EventTarget su cui è chiamato" come si dice su MDN . Puoi registrare tutti gli ascoltatori che desideri sullo stesso evento.

Lasciami riscrivere un po 'la risposta.

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

Poiché il processo di caricamento delle risorse esterne è asincrono, sarebbe ancora più bello utilizzare JavaScript moderno con promesse, come le seguenti.

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

);

Questo:

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

Con jQuery questo funziona per me:

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

E posso usare questa immagine ovunque sul mio sito web indipendentemente dalle sue dimensioni con la seguente proprietà CSS3:

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

SUGGERIMENTO 1: usa un'immagine quadrata di almeno 800 x 800 pixel.

SUGGERIMENTO 2: da utilizzare con ritratti di persone , utilizzareobject-position: 20% 50%;

CSS solo per background-img

Per le immagini di sfondo mancanti, ho anche aggiunto quanto segue in ogni background-imagedichiarazione:

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

NOTA: non funziona per immagini trasparenti.

Lato server Apache

Un'altra soluzione è rilevare l'immagine mancante con Apache prima di inviarla al browser e sostituirla con il contenuto no-img.png predefinito.

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

Ecco una funzione che ho scritto per un'altra risposta: Javascript Image Url Verify . Non so se è esattamente quello che ti serve, ma utilizza le varie tecniche che si usa tra cui i gestori per onload, onerror, onaborte un timeout generale.

Poiché il caricamento dell'immagine è asincrono, chiami questa funzione con la tua immagine e poi chiama il tuo callback qualche tempo dopo con il risultato.

proprio come sotto:

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

if (!img.complete) {

//has picture
}
else //not{ 

}