comment afficher une autre image si l'image source n'est pas trouvée ? (onerror fonctionne dans IE mais pas dans mozilla)

Question

J'ai besoin d'afficher une autre image dans une cellule du tableau si l'image source n'est pas trouvée. Actuellement, le code ci-dessous est utilisé pour le faire.

cell.innerHTML="<img height=40 width=40 src='<%=request.getContextPath()%>/writeImage.htm' onError='ImgErrorVideo(this);'>" 
function ImgErrorVideo(source){
        source.src = "video.png";
        source.onerror = ""; 
        return true; 
}

Le problème est que la solution ci-dessus fonctionne dans Internet Explorer mais pas dans Mozilla.

Veuillez m'indiquer une solution qui fonctionne dans tous les navigateurs.

Answer 1

Je pense que c'est très bien et court

<img src="imagenotfound.gif" alt="Image not found" onerror="this.src='imagefound.gif';" />

Mais, faites attention. Le navigateur de l'utilisateur sera bloqué dans une boucle sans fin si l'image onerror génère elle-même une erreur.

---

EDIT Pour éviter une boucle sans fin, supprimez le onerror d'en sortir immédiatement.

<img src="imagenotfound.gif" alt="Image not found" onerror="this.onerror=null;this.src='imagefound.gif';" />

En appelant this.onerror=null il supprimera le onerror puis essaiera d'obtenir l'image alternative.

---

NOUVEAU Je voudrais ajouter un moyen jQuery, si cela peut aider quelqu'un.

<script>
$(document).ready(function()
{
    $(".backup_picture").on("error", function(){
        $(this).attr('src', './images/nopicture.png');
    });
});
</script>

<img class='backup_picture' src='./images/nonexistent_image_file.png' />

Il vous suffit d'ajouter class='backup_picture' à toute balise img pour laquelle vous souhaitez qu'une image de sauvegarde soit chargée si elle tente d'afficher une mauvaise image.

Answer 2

J'ai obtenu la solution à ma question :

J'ai fait quelque chose comme ça :

cell.innerHTML="<img height=40 width=40 alt='' src='<%=request.getContextPath()%>/writeImage.htm?' onerror='onImgError(this);' onLoad='setDefaultImage(this);'>"

function setDefaultImage(source){
        var badImg = new Image();
        badImg.src = "video.png";
        var cpyImg = new Image();
        cpyImg.src = source.src;

        if(!cpyImg.width)
        {
            source.src = badImg.src;
        }

    }

    function onImgError(source){
        source.src = "video.png";
        source.onerror = ""; 
        return true; 
    } 

De cette façon, il fonctionne dans tous les navigateurs.

Answer 3

Si vous êtes ouvert à une solution PHP :

<td><img src='<?PHP
  $path1 = "path/to/your/image.jpg";
  $path2 = "alternate/path/to/another/image.jpg";

  echo file_exists($path1) ? $path1 : $path2; 
  ?>' alt='' />
</td>

////EDIT OK, voici une version JS :

<table><tr>
<td><img src='' id='myImage' /></td>
</tr></table>

<script type='text/javascript'>
  document.getElementById('myImage').src = "newImage.png";

  document.getElementById('myImage').onload = function() { 
    alert("done"); 
  }

  document.getElementById('myImage').onerror = function() { 
    alert("Inserting alternate");
    document.getElementById('myImage').src = "alternate.png"; 
  }
</script>