HTML si l'image n'est pas trouvée

Question

J'ai une image dans une page HTML :

 <img src="smiley.gif" alt="Smiley face" width="32" height="32" />

Si l'image n'est pas trouvée sur le serveur, elle montre un carré blanc laid.

Je veux faire en sorte que si une image n'est pas trouvée, elle n'affiche rien ou une autre image par défaut que je sais être définitivement sur le serveur.

Comment cela peut-il être fait?

Answer 1

La meilleure façon de résoudre votre problème :

 <img id="currentPhoto" src="SomeImage.jpg" onerror="this.onerror=null; this.src='Default.jpg'" alt="" width="100" height="120">

onerror est une bonne chose pour vous :)

Changez simplement le nom du fichier image et essayez vous-même.

Answer 2

Eh bien, vous pouvez essayer ceci.

   <object data="URL_TO_Default_img.png" type="image/png">
   <img src="your_original_image.png" />
  </object>

cela a fonctionné pour moi. laissez-moi savoir pour vous.

Answer 3

D'accord, mais j'aime utiliser cette méthode, de sorte que chaque fois que l'image originale n'est pas disponible, vous pouvez charger votre image par défaut qui peut être votre smiley préféré ou une image en disant Désolé ! Non disponible, mais au cas où les deux images seraient manquantes, vous pouvez utiliser du texte à afficher. où vous pouvez aussi vous smiley alors. jetez un oeil couvre presque tous les cas.

 <img src="path_to_original_img/img.png"  alt="Sorry! Image not available at this time" 
       onError="this.onerror=null;this.src='<?=base_url()?>assets1/img/default.jpg';">

Answer 4

Pour l'alternative, si l'image n'existe pas, n'affichez rien du tout. (ce que je cherchais)

Vous pouvez remplacer la fonction de la réponse de Robby Shaw dans l'attribut "onerror" par "this.remove()".

 <img id="currentPhoto" src="SomeImage.jpg" alt='1' width="100" height="120">
<img id="currentPhoto" src="SomeImage.jpg" onerror="this.onerror=null; this.remove();" alt="2" width="100" height="120">

Answer 5

Ici, vérifiez ci-dessous l'extrait de code qui, dans celui-ci, j'ai mal orthographié le nom de l'image. Donc, juste à cause de cela, il affiche l'image alternative comme image introuvable ( 404.svg ).

 <img id="currentPhoto" src="https://www.ccrharrow.org/Images/content/953/741209.pg" onerror="this.src='https://www.unesale.com/ProductImages/Large/notfound.png'" alt="">