引导-当有一个图像加载错误时回退

Bootstrap - fallback when there an image load error

本文关键字：错误 回退 加载 图像 有一个 引导      更新时间：2023-09-26

我想在无法加载原始图像时显示no image占位符。
我已经看到使用JavaScript的this.error设置替代图像，如果原始图像不能加载。

是否有其他干净的选择，可能是在Bootstrap或使用CSS3?

UPDATE:这不适用于只有一个图像的页面。会有多个不同大小的图像。类似社交媒体网站的东西。所以修复的性能也很重要。另外，图片由不同的用户上传并存储在Amazon S3 bucket中。

有一个不需要JavaScript的解决方案:

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

但这是一个真正丑陋的。所以我选择JavaScript

这是一个纯CSS的解决方案。

据我所知，我最好的办法是，用背景图像内联样式的空图像占位符替换它，即SVG，以高度和宽度为中心，并指定为Data 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。

相关文章：