html - CSSを使用してIEとChromeで「画像が見つかりません」アイコンを非表示にする方法

Question

私のページにはいくつかの画像があります。

デフォルトでは、特定の画像が利用できない場合、壊れた画像インジケーターが Chrome と IE に表示されます。

この場合、代替テキスト以外は何も表示したくありません。CSSを使用してそれを処理する方法はありますか。

score 12 · Accepted Answer

using javascript

<img src="broken.png" onerror="this.style.display='none'"/>

edit: added small snipet that will handle all images.

$("img").error(function(){$(this).hide();});

score 4 · Accepted Answer

空の文字列として設定alt=" "してみてください。画像が見つからない場合は、空のスペースが表示されます。

score 1 · Accepted Answer

JavaScript で onerror イベントを使用して、画像の読み込みに失敗したときに動作させることができます。

var img = document.getElementById("myImg");
img.onerror = function () { 
    this.style.display = "none";
}

または使用

var images=document.getElementsByTagName("img");
for(i=0;img[i]!=null;i++)
{
img[i].style.display = "none";
}

score 0 · Accepted Answer

JavaScript や CSS を使用する代わりに、object タグを使用できます。よりクリーンで簡単なコードです。次のように、タグの間に代替テキストを追加します。

<object data="img/failedToLoad.png" type="image/png">Alternative Text</object>

4 に答える 4