srcソース画像が見つからないときに「画像が見つかりません」アイコンを黙って隠す方法

画像ファイルが見つからないときに、レンダリングされたHTMLページから従来の「画像が見つかりません」アイコンを非表示にする方法を知っていますか？

JavaScript / jQuery / CSSを使用する作業方法はありますか？

あなたは使用することができonerror、画像の読み込みに失敗した時に動作するようにJavaScriptでイベントを：

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

jQuery（あなたが尋ねたので）：

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

またはすべての画像：

$("img").error(function () { 
    $(this).hide();
    // or $(this).css({visibility:"hidden"}); 
});

画像を非表示にするとレイアウトが変わる場合は、visibility: hidden代わりにを使用する必要.hide()があります。Web上の多くのサイトは、代わりにデフォルトの「画像なし」画像を使用し、src指定された画像の場所が利用できない場合にその画像を属性で指し示します。

<img onerror='this.style.display = "none"'>

壊れた画像アイコンが簡単に表示されるため、Gary Willoughbyによって提案されたソリューションを少し変更しました。私の解決策：

    <img src="..." style="display: none" onload="this.style.display=''">

私のソリューションでは、イメージは最初は非表示で、正常にロードされた場合にのみ表示されます。これには欠点があります。ユーザーにはハーフロードされた画像が表示されません。ユーザーがJSを無効にした場合、画像は表示されません

すべての画像エラーを非表示にするには、ページの下部（bodyの終了タグの直前）に次のJavaScriptを追加します。

(function() {
    var allimgs = document.images;
    for (var i = 0; i < allimgs.length; i++) {
        allimgs[i].onerror = function() {
            this.style.visibility = "hidden"; // Other elements aren't affected. 
        }
    }
})();

少し遅れるかもしれませんが、これが私の試みです。同じ問題に直面したときに、画像のサイズのdivを使用してbackground-imageをこのdivに設定することで修正しました。画像が見つからない場合、divは透明にレンダリングされるため、JavaScriptスクリプトを使用せずにすべてが黙って行われます。

アンディEの答えについて簡単に調査する と、live()拘束力はなくなりerrorます。

// won't work (chrome 5)
$('img').live('error', function(){
     $(this).css('visibility', 'hidden');
});

だからあなたはのように行く必要があります

$('<img/>', {
  src:    'http://www.notarget.com/fake.jpg',
  error:  function(e){
    $(this).css('visibility', 'hidden');
  }
}).appendTo(document.body);

error event handler新しい要素の作成に直接バインドします。

これを正確に行うための気の利いた方法を見つけましたがng-src、Angular.jsでディレクティブを使用するときなどには機能します...

<img
  ng-src="{{myCtrl.myImageUrlThatWillDynamicallyChange}}" 
  onerror="this.src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='"
  />

基本的に最短の透明GIFです（ http://proger.i-forge.net/%D0%9A%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82% D0％B5％D1％80 / [20121112]％20The％20smallest％20transparent％20pixel.html）

もちろん、このgifはいくつかのグローバル変数内に保持できるので、テンプレートを台無しにすることはありません。

<script>
  window.fallbackGif = "..."
</script>

そして使用する

<img
  ng-src="{{myCtrl.myImageUrlThatWillDynamicallyChange}}" 
  onerror="this.src=fallbackGif"
  />

等

単純なCSSを使用するだけ

.AdminImageHolder {
display: inline-block;
min-width: 100px;
max-width: 100px;
min-height: 100px;
max-height: 100px;
background: url(img/100x100.png) no-repeat;
border: 1px solid #ccc;
}