如果找不到源图像，如何显示备用图像？ （在IE中工作但在mozilla中没有工作）

Question

如果找不到源图像，我需要在表格的单元格中显示替代图像。 目前，以下代码用于执行此操作。

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

现在的问题是上面的解决方案是在Internet Explorer中工作，而不是在mozilla中工作。

请告诉我一些适用于所有浏览器的解决方案。

Answer 1

我觉得这很好很短

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

但是，要小心。如果错误图像本身产生错误，用户的浏览器将陷入无限循环。

---

修改 为避免无限循环，请立即从中删除onerror。

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

通过调用this.onerror=null，它将删除onerror然后尝试获取替代图像。

---

新 我想添加一个jQuery方法，如果这可以帮助任何人。

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

您只需将class ='backup_picture'添加到任何想要备份图片加载的img标记中，如果它试图显示错误的图像。

Answer 2

我已经获得了查询的解决方案：

我做过这样的事情：

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

这种方式适用于所有浏览器。

由于 乔蒂

Answer 3

如果您对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 好的，这是一个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>