Détecter quand une image ne se charge pas en Javascript

Existe-t-il un moyen de déterminer si un chemin d'image mène à une image réelle, c'est-à-dire de détecter lorsqu'une image ne se charge pas en Javascript.

Pour une application Web, j'analyse un fichier xml et je crée dynamiquement des images HTML à partir d'une liste de chemins d'images. Certains chemins d'image peuvent ne plus exister sur le serveur, je souhaite donc échouer en douceur en détectant les images qui ne parviennent pas à se charger et en supprimant cet élément HTML img.

Remarque Les solutions JQuery ne pourront pas être utilisées (le patron ne veut pas utiliser JQuery, oui je sais ne pas me lancer). Je connais un moyen dans JQuery de détecter quand une image est chargée, mais pas si elle a échoué.

Mon code pour créer des éléments img mais comment puis-je détecter si le chemin img conduit à l'échec du chargement de l'image?

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

Vous pouvez essayer le code suivant. Cependant, je ne peux pas garantir la compatibilité du navigateur, vous devrez donc le tester.

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

Et mes sympathies pour le boss résistant à jQuery!

La réponse est agréable, mais elle pose un problème. Chaque fois que vous attribuez onloadou onerrordirectement, il peut remplacer le rappel qui a été attribué précédemment. C'est pourquoi il existe une méthode intéressante qui "enregistre l'auditeur spécifié sur le EventTarget sur lequel il est appelé" comme on dit sur MDN . Vous pouvez enregistrer autant d'auditeurs que vous le souhaitez sur le même événement.

Permettez-moi de réécrire un peu la réponse.

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

Étant donné que le processus de chargement des ressources externes est asynchrone, il serait encore plus agréable d'utiliser du JavaScript moderne avec des promesses, telles que les suivantes.

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

);

Ce:

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

Avec jQuery, cela fonctionne pour moi:

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

Et je peux utiliser cette image partout sur mon site Web quelle que soit sa taille avec la propriété CSS3 suivante:

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

CONSEIL 1: utilisez une image carrée d'au moins 800 x 800 pixels.

CONSEIL 2: pour une utilisation avec un portrait de personnes , utilisezobject-position: 20% 50%;

CSS uniquement pour background-img

Pour les images d'arrière-plan manquantes, j'ai également ajouté ce qui suit sur chaque background-imagedéclaration:

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

REMARQUE: ne fonctionne pas pour les images transparentes.

Côté serveur Apache

Une autre solution consiste à détecter l'image manquante avec Apache avant de l'envoyer au navigateur et à la remplacer par le contenu par défaut no-img.png.

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

Voici une fonction que j'ai écrite pour une autre réponse: Javascript Image Url Verify . Je ne sais pas si c'est exactement ce dont vous avez besoin, mais il utilise les différentes techniques que vous utiliseriez qui comprennent des gestionnaires pour onload, onerror,onabort et un délai d' attente général.

Le chargement de l'image étant asynchrone, vous appelez cette fonction avec votre image, puis elle appelle votre rappel un peu plus tard avec le résultat.

comme ci-dessous:

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

if (!img.complete) {

//has picture
}
else //not{ 

}