html - 指定缺少的图像图标

Question

可能重复：
jQuery/Javascript 替换损坏的图像

这应该很容易我只是不知道要搜索的术语。我认为这是 HTML/CSS，如果图像链接被破坏，它通常会显示一个丢失的图像图标，显示一个带有红色、绿色、蓝色形状的页面。在 HTML 中是否可以配置“如果图像链接断开，则使用此图像？”

Answer 1

一个“错误”示例：

<img src="fail.jpg" onerror="this.src='https://www.google.com.br/logos/2012/montessori-res.png';">

http://jsfiddle.net/u4hQd/

Answer 2

我认为核心是如何为 CSS 添加动态功能。除了检测浏览器之外，我不知道 CSS 中的 if/else 检查，但是，如果我需要做这样的事情，我会这样做。

如果你使用 php，你可以这样做：

$imagename = "image.png";
if (file_exists($imagename)){
   echo '<p class="exists">';
} else {
   echo '<p class="dne">';
}

然后在css中你可以拥有

.exists{background:url("../img/git-sprite.png") no-repeat 0px -32px;}
.dne{background:url("../img/git-sprite2.png") no-repeat 0px -32px;}

这样，您可以在 CSS 本身中为此添加 if/else 功能。您不必使用 PHP，我相信 javascript 也可以

Answer 3

你在用php吗？

您可以在发送文件之前进行检查，如下所示：

$filename = "whatever.png";
if (file_exists($filename)){
   $html = "<img src=\"$filename\">";
} else {
   $html = "<img src=\"someotherpath.jpg\">";
}
echo $html;

Answer 4

您的问题是可以理解的，无需任何额外的术语。不幸的是，HTML 中没有你想要的方法。

您可以做的是使用 JS（jQuery 会有所帮助），循环浏览文档中的所有 img 标签，并检查其中哪些有图像（检查是否为空）。对于那些错过图像的人，您可以加载其他图像（一些默认值）。

但是请记住在页面完全加载后运行此脚本（所有资产：JS，CSS，图像），因为如果您在页面加载完成之前运行它，您可能会错误地将默认图像放入某个 img 标签，这没有时间加载它的真实图像。