输入默认图像以防 html <img> 的 src 属性无效？

有没有办法在 HTML <img> 标签中呈现默认图像，以防 src 属性无效（仅使用 HTML）？如果没有，您的轻量级解决方法是什么？

原文由 Ahmed 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 503

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>Object Test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <p> <object data="http://stackoverflow.com/does-not-exist.png" type="image/png"> <img src="https://cdn.sstatic.net/Img/unified/sprites.svg?v=e5e58ae7df45" alt="Stack Overflow logo and icons and such"> </object> </p> </body> </html>

这对我很有效。也许您想使用 JQuery 来挂钩事件。

  <img src="foo.jpg" onerror="if (this.src != 'error.jpg') this.src = 'error.jpg';" alt="add alternative text here">

更新了 jacquargs error guard

更新：仅 CSS 解决方案 我最近看到 Vitaly Friedman 演示了一个我不知道的很棒的 CSS 解决方案。这个想法是将 content 属性应用于损坏的图像。通常 :after 或 :before 不适用于图像，但当它们损坏时，它们会被应用。

 <img src="nothere.jpg" alt="add alternative text here">
<style>
img:before {
    content: ' ';
    display: block;
    position: absolute;
    height: 50px;
    width: 50px;
    background-image: url(ishere.jpg);
}
</style>

演示： https ://jsfiddle.net/uz2gmh2k/2/

正如小提琴所示，损坏的图像本身并没有被删除，但是对于大多数没有任何 JS 或 CSS gob 的情况，这可能会解决问题。如果你需要在不同的位置应用不同的图像，只需用一个类来区分： .my-special-case img:before { ...

原文由 Svend 发布，翻译遵循 CC BY-SA 4.0 许可协议

输入默认图像以防 html <img> 的 src 属性无效？

你尚未登录，登录后可以

js阻止冒泡问题？

Scss的rgba()方法无法对变量进行二次编译？

后端获取的html标签页面如何正常显示？

如何使用echarts绘制奈奎斯特曲线？

在一个前端和position:absolute; position: relative;中的其他标签内容为什么出现异常？

为什么viewsource:网址和直接访问看打的不一样?

为什么下面的代码内部的 div 其 100% 高度可以跳过上层元素?

Stack Overflow 翻译