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或对象标记，就无法实现这两种目标。

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

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

将后备图像设置为容器的背景图像。
将远程图像设置为img标记的背景图像。
加载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请求回退图像。

Answer 2

我在Codepen上找到了一种解决方案，我想与您分享： https://codepen.io/anon/pen/Eqgyyo

body {
  color: #2c3e50;
  font-family: 'verdana';  
  line-height: 1.35em;
  padding: 30px;
}
h1 {
  margin-bottom: 40px;
}
ul {
  list-style: none;
  padding: 0;
}
* {
  box-sizing: border-box;
}

img {
  color: #95a5a6;
  font-size: 12px;
  min-height: 50px;
  position: relative;
  
}
img:before {
  background: #f1f1f1;
  border: 1px solid #ccc;
  border-radius: 3px;
  content: '\1F517' ' broken image of 'attr(alt);
  display: block;
  left: 0;
  padding: 10px;
  position: absolute;
  top: -10px;
  width: 100%;
}

<h1>Broken image fallback CSS</h1>
<img src="no-image-here" alt="Cats with synthesizers in the space " />

<br /><br />
<ul>
  <li>✓ Firefox</li>
  <li>✓ Chrome</li>
  <li>✓ Opera</li>
  <li>✗ Safari (desktop, mobile)</li>
  <li>✗ iOS webview</li>
</ul>

使用CSS的后备图像

2 个答案: