22

如果找不到原始源文件，是否可以显示备用图像？我想只用 css 和 html 来实现这一点，没有 javascript（或 jQuery 等）。这个想法是仍然显示图像，而不是 IE 的“alt”测试或默认（丑陋）交叉。如果没有 javascript 是不可能的，那么我宁愿用基本的 if-then-else 用 php 检查 img src。

4

4 回答 4

53

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

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

对我来说，上述作品完美！

于 2017-03-01T12:01:41.290 回答
16

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

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

但是，您必须提供宽度或高度才能使其正常工作（当找不到 img-src 时）：

img
{
background-image:url('default.png');
width:400px;
}
于 2012-05-27T07:36:38.070 回答
7 
<object data="foobar.png" width=200 height=200>
  <img src="test.png" alt="Just testing.">
</object>

这foobar.png是主图像，test.png是后备图像。根据元素的语义，当且仅当主要数据（由属性指定）无法使用时，才应呈现object元素（此处为元素）的内容。imgdata

尽管浏览器在过去一年的实现中出现了严重的错误object，但这种简单的技术似乎适用于现代版本的 IE、Firefox、Chrome。

于 2012-05-27T08:13:35.337 回答
3

是的，你可以只使用 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'">
于 2020-03-19T08:49:44.213 回答