If the source image cannot be identified, how can an alternate image be displayed? (onerror works in Internet Explorer, but not in Mozilla) [duplicate]

Problem

If the original picture cannot be located, I need to present an alternate image in the table cell. Currently, the code below is used to accomplish this.

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; 
}

The issue now is that the technique above works in Internet Explorer but not in Mozilla.

Please suggest a solution that works across all browsers.

Asked by Jyoti

Solution #1

This is extremely beautiful and brief, in my opinion.

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

But be cautious. If the onerror image itself causes an error, the user’s browser will become trapped in an unending cycle.

EDIT Remove the onerror from it all at once to avoid an unending loop.

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

By referring to this. It will remove the onerror and then try to fetch the alternate picture with onerror=null.

NEW If anyone finds this useful, I’d like to create a jQuery method.

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

Simply add class=’backup picture’ to any img tag that you want to load a backup image if the original fails to load.

Answered by Etdashou

Solution #2

I’ve found the answer to my question:

I’ve done something similar before:

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; 
    } 

It works in all browsers this way.

Answered by Jyoti

Solution #3

If you’re willing to try a PHP solution, here’s what you should do:

<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 Here’s a version in 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>

Answered by Ben

Post is based on https://stackoverflow.com/questions/3984287/how-to-show-alternate-image-if-source-image-is-not-found-onerror-working-in-ie