web-dev-qa-db-fra.com

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

Je dois afficher une image alternative dans la 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.

S'il vous plaît dites-moi une solution qui fonctionne dans tous les navigateurs.

javascripthtmlimage
114
Jyoti

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

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

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

EDIT Pour éviter les boucles sans fin, supprimez-y onerror 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 l'erreur, puis tentera d'obtenir l'image de remplacement.

NEW 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' />

Vous devez simplement ajouter class = 'backup_picture' à toute balise img que vous souhaitez charger d’une image de sauvegarde si elle tente d’afficher une image de mauvaise qualité.

354
Etdashou

J'ai la solution pour ma requête:

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 domaines.

Merci Jyoti

2
Jyoti

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 de 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>
1
Ben