Détecter l'échec du chargement d'une image en JavaScript

Question

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 si une image ne se charge pas en JavaScript.

Pour une application web, j'analyse un fichier xml et crée dynamiquement des images HTML à partir d'une liste de chemins d'accès aux images. Certains chemins d'accès à l'image peuvent ne plus exister sur le serveur, je veux donc échouer de manière élégante en détectant les images qui ne se chargent pas et en supprimant l'élément HTML img.

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

Mon code permet de créer des éléments img mais comment puis-je détecter si le chemin img mène à une image qui n'a pas pu être chargée ?

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

Answer 1

D'après la réponse de Rafael Martins, si vous utilisez React, utilisez ce code :

<img
  src="https://example.com/does_not_exist.png"
  onError={(e) => {
    e.currentTarget.src = "https://example.com/default.png"
  }}
/>

Answer 2

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, y compris les gestionnaires de onload , onerror , onabort et un temps mort général.

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

Answer 3

Il s'agit d'une variante de la réponse @emil.c, mais qui se résout par vrai/faux en fonction du chargement ou non de l'image (au lieu de lancer une erreur en cas d'échec) :

function testImage(url) {
  if (!url || typeof url !== 'string') return Promise.resolve(false);
  return new Promise((resolve) => {
    const imgElement = new Image();
    imgElement.addEventListener('load', () => resolve(true));
    imgElement.addEventListener('error', () => resolve(false));
    imgElement.src = url;
  });
}

Answer 4

Comme ci-dessous :

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

if (!img.complete) {

//has picture
}
else //not{ 

}