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

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 vilain carré vide.

Je veux faire en sorte que si une image n'est pas trouvée, elle n'affichera rien ou une autre image par défaut dont je sais qu'elle se trouve définitivement sur le serveur.

Comment cela peut-il être fait?

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.

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. faites-moi savoir pour vous.

Ok, mais j'aime utiliser de cette façon, 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 disant Désolé! Non disponible, mais au cas où les deux images seraient manquantes, vous pouvez utiliser du texte pour les afficher. où vous pouvez aussi vous smiley alors. avoir un regard 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';">

Voici l'extrait de code ci-dessous qui, dans ce cas, j'ai mal orthographié le nom de l'image. Donc, juste à cause de cela, il affiche l'image alternative comme image non trouvée (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="">

La manière habituelle de gérer ce scénario consiste à définir la altbalise sur quelque chose de significatif.

Si vous voulez une image par défaut à la place, je suggère d'utiliser une technologie côté serveur pour servir vos images, appelée en utilisant un format similaire à:

<img src="ImageHandler.aspx?Img=Blue.jpg" alt="I am a picture" />

Dans le ImageHandler.aspxcode, détectez toutes les erreurs de fichier non trouvées et diffusez votre fichier default.jpg.

Vous pouvez afficher un texte alternatif en ajoutant alt:

<img src="my_img.png" alt="alternative text" border="0" /> 

J'ai ajouté un div parent autour de l'image et utilisé le gestionnaire d'événement onerror suivant pour masquer l'image d'origine car dans IE, il y avait toujours une image laide image introuvable après l'utilisation de l'attribut alt:

<div style=" width:300px; height:150px; float:left; margin-left:5px; margin-top:50px;">
        <img src='@Url.Content("~/Images/Logo-Left.png")' onerror="this.parentElement.innerHTML = '';" />
</div>

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

Vous pouvez permuter la fonction de la réponse de Robby Shaw dans l'attribut "onerror" à "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">

Essayez d'utiliser border=0dans l' imgétiquette pour faire disparaître le carré laid.

<img src="someimage.png" border="0" alt="some alternate text" />

Je voulais cacher l'espace occupé par le <img>tag, donc cela a fonctionné pour moi

<img src = "source.jpg" alt = "" >

Si vous voulez une image alternative au lieu d'un texte, vous pouvez également utiliser php:

$file="smiley.gif";
$alt_file="alt.gif";
if(file_exist($file)){
     echo "<img src='".$file."' border="0" />";
}else if($alt_file){
     // the alternative file too might not exist not exist
     echo "<img src='".$alt_file."' border="0" />";
}else{
  echo "smily face";
}

moyen simple de gérer cela, ajoutez simplement une image d'arrière-plan.

essayez PHP

if (file_exists('url/img/' . $Image)) {
    $show_img_URL = "Image.jpg";
} else {
    $show_img_URL = "Image_not_found.jpg";
}

cela fonctionne pour moi que si vous ne voulez pas utiliser l'attribut alt si l'image se brise, vous pouvez utiliser ce morceau de code et le définir en conséquence.

<h1>
  <a> 
   <object data="~/img/Logo.jpg" type="image/png">
     Your Custom Text Here
   </object>
  </a>
</h1>

Celui-ci a fonctionné pour moi. en utilisant le srcset. Je viens de l'apprendre, donc je ne sais pas si les navigateurs le prennent en charge, mais cela a fonctionné pour moi. Essayez-le et donnez-moi plus tard votre avis.

 <img src="smiley.gif" srcset="alternatve.gif" width="32" height="32" />

Solution - J'ai supprimé les éléments de hauteur et de largeur de l'image, puis le texte alternatif a fonctionné.

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

À

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

Merci à tous.