指定缺少的图像图标

时间:2012-08-31 20:12:37

标签: html css image

  

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

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

4 个答案:

答案 0 :(得分:13)

'onerror'示例:

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

http://jsfiddle.net/u4hQd/

答案 1 :(得分:1)

我认为这样做的核心是如何为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也能正常运行

答案 2 :(得分:0)

您使用的是PHP吗?

您可以在发送文件之前检查:

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

答案 3 :(得分:0)

您的问题可以理解,无需任何其他术语。 遗憾的是,HTML中无法满足您的需求。

你可以做的是使用JS(jQuery将帮助),循环遍历文档中的所有img标签,并检查它们中的哪些有图像(检查为null)。对于那些错过图像的人,可以加载一些其他图像(默认情况下)。

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