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

La réponse est agréable, mais il présente un problème. Chaque fois que vous affectez onload ou onerror directement, il peut remplacer la fonction de rappel qui vous a été attribué précédemment. C'est pourquoi il y a une belle méthode qui "les registres de l'écouteur spécifié sur la EventTarget il est appelé" comme ils disent sur MDN. Vous pouvez enregistrer autant d'auditeurs que vous le souhaitez sur le même événement.

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

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

Parce que la ressource externe processus de chargement est asynchrone, il serait encore plus sympa à utiliser les technologies modernes de JavaScript 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');
    }

);

/**
 * 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 c'est de travailler 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 la taille de celui-ci à la suite de propriété CSS3 :

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

ASTUCE 1 : utiliser un image carrée d'au moins 800 x 800 pixels.

ASTUCE 2 : pour une utilisation avec portrait de gens, utilisez object-position: 20% 50%;

CSS uniquement pour l'arrière-plan-img

Pour le manque d'images de fond, j'ai également ajouté les opérations suivantes sur chaque background-image déclaration :

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

REMARQUE : ne fonctionne pas pour les images transparentes.

Serveur Apache côté

Une autre solution consiste à détecter des manque image avec Apache avant d'envoyer au navigateur et remplace par la valeur par défaut no-img.png contenu.

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