显示替代图像

Question

如果找不到原始源文件,是否可以显示备用图像？我想用css和html,没有javascript(或jQuery和类似的)来实现这一点.我们的想法是仍然显示图像,而不是IE的"alt"测试或默认(丑陋)交叉.如果没有javascript就不可能,我宁愿用php和一个基本的if-then-else检查img src.

Answer 1

用很少的代码实现这一点的非常简单和最好的方法

<img class="avatar" src="img/one.jpg" alt="Not Found" onerror=this.src="img/undefined.jpg">

对我来说上面的作品很完美!

Answer 2

您可以使用img元素的CSS background-image属性执行此操作,即

img
{
background-image:url('default.png');
}

但是,您必须为此工作提供宽度或高度(当找不到img-src时):

img
{
background-image:url('default.png');
width:400px;
}

Answer 3

<object data="foobar.png" width=200 height=200>
  <img src="test.png" alt="Just testing.">
</object>

这foobar.png是主要图像,test.png是后备图像.通过object元素的语义,img当且仅当不能使用主数据(由data属性指定)时,才应呈现元素(此处为元素)的内容.

虽然浏览器object在过去一年的实现中有很多错误,但这种简单的技术似乎适用于现代版本的IE,Firefox,Chrome.

Answer 4

是的，你可以只使用 html 来做到这一点，当找不到 img src 时，它会抛出错误，所以这里我们可以处理它。还有一点是设置this.onerror = null进行递归调用（默认图片未找到）

<img alt="User Image" class="user-image" src="/Resources/images/user-icon.png" onerror="this.onerror=null; this.src='/Resources/images/default_img.png'">