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

Question

我的页面上有一些图像。

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

在这种情况下，除了替代文本外，我不希望显示任何内容。有没有办法使用 CSS 来处理它。

score 12 · Accepted Answer

使用 javascript

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

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

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

score 4 · Accepted Answer

4

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

于 2013-08-28T10:00:23.677 回答

score 1 · Accepted Answer

您可以使用 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";
}

score 0 · Accepted Answer

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

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

4 回答 4