[解決済み] CSSによるフォールバック画像

質問

を持っています。 <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ではクエスチョンマーク)が背景画像の上に表示されます。（大きな問題ではありませんが、これを取り除きたいのです。）

どうすればこれらの問題を解決できますか？ または：同じ結果を得るための他のテクニックがありますか？

私が見つけたのは この質問 が、与えられた解決策は、Javascriptに依存しているか、または <object> (Chromeでは動作しないようです)。できればJavascriptを使わない、純粋なCSS/HTMLのソリューションを希望しています。

複数の background-image が、それが良い選択肢かどうかはわかりません（ブラウザのサポート？ と、到達できない画像でフォールバックするのか？） あるいは、SVG画像を以下のように埋め込むことを考えていました。 データ-ウリ .

最も柔軟な（そして互換性のある）方法の提案は？

解決方法は？

残念ながら、Javascriptやobjectタグがないと、この2つを実現することはできません。

画像アイコンが欠けるのを回避するために、このようにすることもできます。

画像をコンテナ内に配置します（すでにコンテナ内に入っている場合もあります）。 コンテナの幅と高さは画像と同じにする。

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リクエストが1回余分に発生することです。