Question

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

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

Answer 1

'onerror'示例：

<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标签，并检查它们中的哪些有图像（检查为null）。对于那些错过图像的人，可以加载一些其他图像（默认情况下）。

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

指定缺少的图像图标

4 个答案: