指定缺少的图像图标 [重复]答案

【问题标题】：Specify missing image icon [duplicate]指定缺少的图像图标 [重复]
【发布时间】：2012-08-26 15:50:05
【问题描述】：

可能重复：
jQuery/Javascript to replace broken images

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

【问题讨论】：

请注意，尽管上面链接的标题中有 jQuery，但答案完全基于标准 Javascript
@Icarus：只有接受的答案。下面提供了一个 jQuery 答案。
投票重新打开，因为虽然问题相似，但我认为要求 CSS 解决方案的问题不能与要求 JavaScript 解决方案的问题重复。即使唯一可能的解决方案是无论如何使用 JavaScript。
不确定客户端应该在哪里发生，但 js 是一个非常合理的处理位置。这对我有用。
Duplicates should NOT be deleted.

【解决方案1】：

'onerror' 示例：

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

http://jsfiddle.net/u4hQd/

【讨论】：

【解决方案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 也可以工作

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

建议的解决方案很糟糕，事件"onerror" 是专门针对这个问题制作的。
@nightcracker，我没有说他的术语不清楚，但既然他提到了，他“只是不知道术语”，我写的没有任何附加术语是可以理解的。
对不起，我看错了，这就是我编辑它的原因:)
所以，请在下一次粗鲁之前阅读帖子。

【解决方案4】：

你在用php吗？

您可以在发送文件之前检查以下内容：

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

【讨论】：

这不是我们想要的，OP 想要这个客户端。
仅仅因为它被标记为html/css并不意味着他没有使用php。这是一个完全有效的解决方案，提供了另一种观点。
不，不是，例如他可能正在编写用户脚本或模板。我无法想象这个解决方案在任何情况下都有用。
fwiw 这对我个人来说没有用，因为是的，我们确实有商业原因（例如，按硬盘访问收费）不以这种方式在服务器端进行。
这是另一个解决方案，顺便说一下，@nightcracker，服务器端验证的想法，正如 ajon 所提出的，比客户端要好得多。有很多原因。