如何使用CSS隐藏IE和Chrome上的“图像未找到”图标

Question

我的页面上有一些图像。

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

我想要显示 nothing ，但在这种情况下是替代文字。有没有办法用CSS来处理它。

Answer 1

使用javascript

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

编辑：添加了可以处理所有图像的小snipet。

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

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

Answer 2

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

Answer 3

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

Answer 4

您可以使用object标记，而不是使用JavaScript或CSS。这是更清晰，更简单的代码。在标签之间添加替代文字，如下所示：

var LastName = GetValueofField("txtName");

function GetValueofField(fieldName)
    {
        return document.getElementById(fieldName).value;
    }

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