帶CSS的後備圖像

我有一個<img>顯示遠程圖像。我希望它回退到另一個本地映像，在遠程無法訪問的情況下。帶CSS的後備圖像

<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請求）
它示出了在地方稍微未找到圖標（在Safari問號） TE原始圖像的，那就是背景圖片上方顯示（不是一個大問題，但我想擺脫它）

我怎麼能解決這些問題？或者：還有其他技術可以達到相同的效果嗎？

我發現this question但給定的解決方案依賴於Javascript或<object>（這似乎不適用於Chrome）。我想要一個純粹的CSS/HTML解決方案，如果可能，不使用Javascript。

我知道關於多個background-image，但我不確定它是否是一個好選擇（瀏覽器支持？並且它會後備一個無法訪問的圖像？）。或者我正在考慮嵌入一個SVG圖像作爲data-uri。

對最靈活（和兼容）方法的建議？

來源

2015-11-27 Kamafeather

可能相關 - http://stackoverflow.com/questions/22051573/how-to-hide-image-broken-icon-using-only-css-html-without-js –

我想你可以使用類的後備圖像，像這樣： –

最好的答案，與圖像有一個alpha的作品：http://stackoverflow.com/questions/8124866/how-does-one-use-the-onerror-attribute-of- an-img-element thx @MadalinaTaina讓我找到它！ – Salix

不幸的是，你不能在沒有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請求的後備圖像。

來源

2015-11-27 14:14:16 beerwin

帶CSS的後備圖像

回答

相關問題