web-dev-qa-db-ja.com

バックグラウンドを使用したonerrorイベント：url（）

ソース画像が見つからない場合に代替画像を表示する方法はありますか？私はこれを達成するために以下のようなことをすることを知っています：

<img src="imagenotfound.gif" alt="Image not found" onError="this.src='imagefound.gif';" />

しかし、このようなことをしている場合、エラーがある場合や画像が見つからない場合はどうすればキャッチできますか？

<div style="background:url('myimage.gif')"></div>
htmlcssimagebackgroundonerror
28
Bono

_myimage.gif_が透明でない場合、複数の背景を使用できます：

_background: url('myimage.gif'), url('fallback.gif');
_

このように_fallback.gif_は、_myimage.gif_が利用できない場合にのみ表示されます。

_fallback.gif_が使用可能であっても、_myimage.gif_がダウンロードされる場合があることに注意してください。

あるいは、広くサポートされていませんが、CSS Images 3では image()表記 を導入しています。

_background: image('myimage.gif', 'fallback.gif');
_

複数の _<image-decl>s_ をコンマで区切って指定できます。この場合、関数は 無効な画像 ではない最初の画像を表します。

87
Oriol

背景画像では、イベントはありません。自分で確認してください。

（XML）HTTPリクエストを行う 、および エラーステータスコード で応答を取得する場合、またはまったく応答しない場合（タイムアウト後）、別のイメージリソースを使用します。このアプローチは Same-Origin Policy によって制限されています。

3
PointedEars

また、ダミーイメージを使用して、そこからonerrorイベントを使用することもできます...

        $imageFoo = '
        <div id="' . $uniqueId . '"
             style="
                background-image: url(//foo.lall/image.png);
                -webkit-background-size: contain;
                -moz-background-size: contain;
                -o-background-size: contain;
                background-size: contain;
                background-position: center;
                background-repeat: no-repeat;
             "
        ></div>
        <!-- this is a helper, only needed because "background-image" did not fire a "onerror" event -->
        <img style="display: none;" 
             src="//foo.lall/image.png" 
             onerror="var fallbackImages = $(this).data(\'404-fallback\'); $(\'#' . $uniqueId . '\').css(\'background-image\', \'url(\' + fallbackImages + \')\');"
             data-404-fallback="//foo.lall/image_fallback.png"
        >
        ';
2
Lars Moelleken