问题描述
我想在无法加载原始图像时显示no image -placeholder。
如果无法加载原始图像，我已经看到了JavaScript的this.error设置备用图像的用法。
是否有其他替代方法（可能在Bootstrap中或使用CSS3）？
更新：这不适用于具有单个图像的页面。 将有多个具有不同大小的图像。 类似于社交媒体网站。 因此修复的性能也很重要。 图像也由其他用户上传并存储在Amazon S3存储桶中。
1楼
有没有JavaScript的解决方案：
<object data="path/to/your/placeholder.jpg" type="image/jpg">
<img src="path/to/your/image.jpg">
</object>
但这是一个真正的丑陋。 所以我会选择JavaScript。
2楼
这是使用纯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 */
}
使用服务器处理请求。
这就像将痛苦转移到服务器，而与请求资源的浏览器无关。 您可以按照以下步骤进行操作：
- 将所有静态资源请求重定向到路由器脚本。
-
检查请求是否从脚本中给出了404错误或非图像文件。
- 如果文件存在，则提供文件。
- 如果没有，请获取占位符图像并将其存储。
使用具有以下功能的PHP可以轻松完成此操作：
-
file_exists()：检查文件在服务器中是否存在。 -
file_get_contents()：读取文件并在浏览器中存储或吐出。
我绝对可以确定该解决方案可以在服务器端处理中使用，并且如果您有服务器端脚本，则可以使用这些步骤来实现而不使用JavaScript。
希望这可以帮助。