Bootstrap - 当出现图像加载错误时回退

Question

我想在无法加载原始图片时显示no image - 占位符。
如果无法加载原始图片，我已经看到使用JavaScript this.error设置备用图片。

是否有任何备用的干净选项，可能是在Bootstrap中还是使用CSS3？

更新：这不适用于包含单个图片的页面。将有多个不同大小的图像。像社交媒体网站的东西。所以修复的性能也很重要。此外，图像由不同的用户上传并存储在Amazon S3存储桶中。

Answer 1

有一个没有JavaScript的解决方案：

<object data="path/to/your/placeholder.jpg" type="image/jpg">
    <img src="path/to/your/image.jpg">
</object>

但这是一个非常丑陋的。所以我会选择JavaScript。

Answer 2

这是Pure CSS的解决方案。

据我所知，我最好的选择是将其替换为带有背景图像内联样式的空图像占位符，即SVG，以高度和宽度为中心，并指定为数据URI，因为这永远不会失败。

<img src="image-to-be-loaded.png" />

说完多张图片后，请使用以下CSS：

img {
   background: url('data:') center center no-repeat transparent;
   background-size: cover; /* for new browsers */
}

使用服务器处理请求。

这就像将痛苦转移到服务器一样，无论请求资源的浏览器如何。您可以通过以下步骤执行此操作：

1. 将所有静态资源请求重定向到路由器脚本。
2. 检查请求是否从脚本中提供404错误或非图像文件。
   1. 如果文件存在，请提供文件。
   2. 如果没有，请抓住占位符图像并为其提供服务。

使用具有以下功能的PHP可以轻松完成此操作：

• file_exists()：检查文件是否存在于服务器中。
• file_get_contents()：阅读文件并在浏览器上存储或吐痰。

我绝对相信这个解决方案适用于服务器端处理，如果你有一个服务器端脚本，你可以使用这些步骤来实现而不使用JavaScript。

希望这有帮助。