image - 使用 CSS 的后备图像

Question

我有一个 <img>显示远程图像。我希望它在无法访问远程图像的情况下回退到另一个本地镜像。

<img class="cc_image fallback" src="http://www.iconarchive.com/download/i82888/limav/flat-gradient-social/Creative-Commons.ico"> 

.cc_image {
    width: 256px;
    height: 256px;
}

.cc_image.fallback {
    /* this URL here is theoretically a local one (always reachable) */
    background-image: url('https://cdn2.iconfinder.com/data/icons/picons-basic-3/57/basic3-010_creative_commons-256.png');
}

它的工作原理是当找不到 src 图像时，将显示背景图像。

缺点是:

• 它将始终加载背景图像(额外的 HTTP 请求)
• 它在原始图像的位置显示了一个小的 not-found-icon(Safari 上的问号)，它显示在背景图像上方(不是什么大问题，但我想摆脱它)

我该如何解决这些问题？或者:是否有其他技术可以达到相同的结果？

我找到了 this question但给定的解决方案依赖于 Javascript 或 <object> (这似乎不适用于 Chrome)。我想要一个纯 CSS/HTML 解决方案，如果可能，不使用 Javascript。

我知道倍数 background-image但我不确定它是否是一个好的选择(浏览器支持？它会退回到无法访问的图像吗？)。或者我正在考虑将 SVG 图像嵌入为 data-uri。

关于最灵活(和兼容)方法的建议？

Answer 1

不幸的是，如果没有 Javascript 或对象标记，您将无法同时实现这两者。

您可以这样做以避免丢失图像图标:

将您的图像放在一个容器中(它可能已经在一个容器中)。使容器与图像具有相同的宽度和高度。

1. 将后备图像设置为容器的背景图像。
2. 将远程图像设置为您的 img 标签的背景图像。
3. 加载一个 1x1 像素的透明 png 作为图像的 src(请参阅代码了解如何在没有额外 HTTP 请求的情况下完成此操作)。

代码:

HTML

<!-- you could use any other tag, such as span or a instead of div, see css below -->
<div class="cc_image_container fallback">
    <img class="cc_image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="background-image: url(*your remote image*)"/>
</div>

CSS

.fallback {
    background-image: url(*fallback image here*);
    display: inline-block; /*to ensure it wraps correctly around the image, even if it is a a or span tag*/
    min-width: specify a minimum width (could be the width of the fallback image) px; 
    min-height: specify a minimum height (could be the height of the fallback image) px;
    background-position: center center; // fallback for older browsers
    background-size: cover;
    background-repeat: no-repeat;
}

.cc_image {
    min-width: same as container px;
    min-height: same as container px;
    background-position: center center; // fallback for older browsers
    background-size: cover;
    background-repeat: no-repeat;
}

• min-width 和 max-width 确保背景图像保持可见。
• background-position 确保图像的中心部分保持可见，并且对于旧浏览器来说是一种优雅的退化
• background-size 调整背景图像的大小以填充元素背景。 cover 值意味着图像将被调整大小以完全覆盖元素(图像的一些外边缘可能会被裁剪)
• img src标签中的base64数据是透明的1px png。
• 这还有一个额外的好处，即普通用户和一些机器人可能无法保存您的图像(基本的图像保护)
• 唯一的缺点是，对于后备图片，您仍然会有一个额外的 HTTP 请求。