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/user-icon.png'">

显示替代图像

4 个答案: