如何使用 CSS 在 IE 和 chrome 上隐藏“找不到图像”图标

Posted 2023-03-05

【中文标题】如何使用 CSS 在 IE 和 chrome 上隐藏“找不到图像”图标

【英文标题】：how to hide "image not found" icon on IE and chrome using CSS

【发布时间】：2013-08-31 08:10:48

【问题描述】：

我的页面上有一些图片。

默认情况下，如果给定图像不可用，则损坏的图像指示器会显示在 Chrome 和 IE 上。

我希望 nothing 在这种情况下只显示替代文本。有没有办法使用 CSS 来处理它。

【问题讨论】：

***.com/questions/3235913/…

【参考方案1】：

尝试将alt=" "设置为空字符串，如果找不到图像，则只有一个空格。

【讨论】：

Chrome 不会隐藏损坏图像的图标，但 OP 想要隐藏这些图标

感谢您的回复。在 IE 上也会出现损坏的图像，我希望它使用 CSS 而不是 JS 来完成，如果有任何可用的选项，请帮助。

【参考方案2】：

您可以使用 javascript 中的 onerror 事件在图像加载失败时采取行动：

var img = document.getElementById("myImg");
img.onerror = function ()  
    this.style.display = "none";

或使用

var images=document.getElementsByTagName("img");
for(i=0;img[i]!=null;i++)

img[i].style.display = "none";

【参考方案3】：

使用javascript

<img src="broken.png" onerror="this.style.display='none'"/>

编辑：添加了将处理所有图像的小片段。

$("img").error(function()$(this).hide(););

示例：http://jsfiddle.net/Va2Wd/

【讨论】：

这可以作为一个例子，但是如果 OP 对很多图像都这样做，那么 JS 应该 not 内联

【参考方案4】：

您可以使用 object 标签，而不是使用 JavaScript 或 CSS。它的代码更简洁。在标签之间添加替代文本，如下所示：

<object data="img/failedToLoad.png" type="image/png">Alternative Text</object>

http://www.w3schools.com/tags/tag_object.asp