如何显示备用图像，如果源图像没有找到? (一个错误工作在 IE，但没有在 mozilla)

如果没有找到源图像，我需要在表格的单元格中显示一个替代图像。 目前下面的代码用于这样做。

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 中使用。

请告诉我一些在所有浏览器中都可以工作的解决方案。

286324 次浏览
小开

如果您对 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>

编辑 好的，这是一个 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>
小开

对于我的疑问，我有一个解决方案:

我做过这样的事:

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

这种方式可以在所有浏览器中工作。

小开

我认为这是非常好和短

<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，它将删除一个错误，然后尝试获得替代图像。

全新的 我想添加一个 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' />

您只需要向任何一个 img 标记中添加 class = ‘ back _ picture’，以便在备份图片试图显示错误图片时加载该标记。


提交答案