web-dev-qa-db-ja.com

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

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

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

javascriptjqueryhtmlcssimage
86
systempuntoout

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

_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"}); 
});
_

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

97
Andy E
<img onerror='this.style.display = "none"'>
111
Gary Willoughby

Gary Willoughbyによって提案されたソリューションを少し変更しました。これは、壊れたイメージを短時間表示するためです。私の解決策：

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

私のソリューションでは、イメージは最初は非表示で、正常にロードされた場合にのみ表示されます。欠点があります：ユーザーは、半分読み込まれた画像を見ることができません。また、ユーザーがJSを無効にしている場合、画像は表示されません。

4
Sash

すべての画像エラーを非表示にするには、ページの最後（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. 
        }
    }
})();
4
Q_Mlilo

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

4
Adway Lele

Andy Eの答えを簡単に調べて、live() bind _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を直接バインドします。

4
jAndy

私はこれを正確に行うための気の利いたメソッドを見つけましたが、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"
  />

等.

3
Jacek Głodek

単純な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;
}
0
Owais Bin Rizwan