voir si src d'img existe

Question

lorsque je place une balise img, je crée dynamiquement l'attribut src. Existe-t-il un moyen de tester si le src (chemin où se trouve l'image) existe réellement avec javascript afin d'éviter d'obtenir:

Answer 1

Vous pouvez utiliser l'événement error:

var im = document.getElementById('imageID'); // or select based on classes
im.onerror = function(){
  // image not found or change src like this as default image:

   im.src = 'new path';
};

Version en ligne:

<img src="whatever" onError="this.src = 'new default path'" />

Ou

<img src="whatever" onError="doSomething();" />

---

<img> tag prend en charge ces événements:

• abort (onAbort)
• error (onError)
• load (onLoad)

Plus d'informations:

• Événements JavaScript
• jQuery's error

Answer 2

vous pouvez effectuer un appel ajax précédent (avec la méthode head) et voir le code de retour du serveur ou vous pouvez utiliser l'événement onerror pour changer l'URL ou la masquer, par ex.

<img src="notexist.jpg" onerror="this.style.visibility = 'hidden'">

(J'ai utilisé l'attribut inline juste pour expliquer l'idée)

Answer 3

Si vous créez dynamiquement le src avec javascript, vous pouvez utiliser ceci:

var obj = new Image();
    obj.src = "http://www.javatpoint.com/images/javascript/javascript_logo.png";

if (obj.complete) {
    alert('worked');
} else {
    alert('doesnt work');
}