如果找不到源图像，如何显示替代图像？ （在 IE 中工作但在 Mozilla 中不工作的错误）[重复]

Posted 2023-03-05

【中文标题】如果找不到源图像，如何显示替代图像？ （在 IE 中工作但在 Mozilla 中不工作的错误）[重复]

【英文标题】：how to show alternate image if source image is not found? (onerror working in IE but not in mozilla) [duplicate]

【发布时间】：2011-04-28 09:51:12

【问题描述】：

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

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 中无效。

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

【问题讨论】：

代码缩进 4 个空格。此外，如果上面的代码是你所拥有的，那么你会在 innerHTML 的末尾出现一个缺少双引号的错误。

我忘了把双引号放在这里。 #3938383 中给出的解决方案，在回复中提到了一个链接，该链接不起作用。

另一个提示：当您回复某人时，请以 @ 开头，后跟他们的姓名，他们会收到一条您已回复的消息。

@some - 当智能感知找到并自动完成其名称中的剩余字符时，它会在评论中留下“@johntrepreneur”文本，但有时智能感知在输入回复评论时不会触发用户并将其从评论中删除。不确定他们是否收到通知，但这很烦人，而且很多 cmets 的答案很难阅读。为什么它有时只对某些用户有效？？？

请参考正确答案，我也有同样的问题

【参考方案1】：

我觉得这个很好很短

<img src="imagenotfound.gif"  onerror="this.src='imagefound.gif';" />

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

---

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

<img src="imagenotfound.gif"  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 标签，以防它试图显示不良图片。

【讨论】：

@Etashou - 与所有其他浏览器不同，Chrome 只会触发一次onerror 事件。

在 mozilla 中不工作，在 this.src 上出现语法错误

对我来说，使用 firefox 很长一段时间都可以正常工作（自发布以来）。你有没有什么演示没有，我们可以在哪里查看它。

只是让你们知道 $().error() 在 jQuery 1.8 上已被弃用。请改用$().on("error", function());

Chrome only triggers the onerror event one time 今天不正确，它正在陷入无限循环。

【参考方案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; 
     

这样它可以在所有浏览器中工作。

【参考方案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>

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

【讨论】：

感谢您的回复。但我只需要通过 javascript 来执行此操作。请告诉我是否有任何解决方案。