CSS / HTMLのみを使用して画像の壊れたアイコンを非表示にする方法は？

壊れた画像のアイコンを非表示にするにはどうすればよいですか？ 例：

エラーsrcの画像があります。

<img src="Error.src"/>

ソリューションはすべてのブラウザで機能する必要があります。

CSS / HTMLが画像が壊れたリンクであるかどうかを知る方法がないため、何があってもJavaScriptを使用する必要があります

ただし、画像を非表示にするか、ソースをバックアップで置き換えるための最小限の方法を次に示します。

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

または

<img src="Error.src" onerror="this.src='fallback-img.jpg'"/>

更新

このようなロジックを一度に複数の画像に適用するには、次のようにします。

document.addEventListener("DOMContentLoaded", function(event) {
   document.querySelectorAll('img').forEach(function(img){
  	img.onerror = function(){this.style.display='none';};
   })
});

<img src="error.src">
<img src="error.src">
<img src="error.src">
<img src="error.src">

アップデート2

CSSオプションについては、以下のmichalzuberの回答を参照してください。画像全体を非表示にすることはできませんが、壊れたアイコンの外観を変更します。

ここで人々が言っ​​ていることにもかかわらず、JavaScriptはまったく必要なく、CSSも必要ありません。

それは実際にはHTMLだけで非常に実行可能でシンプルです。 画像が読み込まれない場合は、デフォルトの画像を表示することもできます。ここに方法があります...

これはIE8までさかのぼって、すべてのブラウザーで機能します（2015年9月に私がホストしたサイトへの250,000以上の訪問者のうち、ZERO人はIE8よりも悪いものを使用しました。つまり、このソリューションは文字通りすべてに機能します）。

手順1：画像をimgではなくオブジェクトとして参照します。オブジェクトが失敗しても、壊れたアイコンは表示されません。彼らは何もしません。IE8以降では、ObjectタグとImgタグを交換して使用できます。サイズを変更して、通常の画像で実行できるすべての見事なこともできます。オブジェクトタグを恐れないでください。それは単なるタグであり、大きくてかさばることはなく、何も遅くなりません。別の名前でimgタグを使用するだけです。速度テストは、それらがまったく同じように使用されていることを示しています。

ステップ2：（オプションですが、すばらしい）デフォルトの画像をそのオブジェクト内に貼り付けます。目的の画像が実際にオブジェクトに読み込まれる場合、デフォルトの画像は表示されません。たとえば、ユーザーのアバターのリストを表示したり、サーバーに画像がない場合はプレースホルダー画像を表示したりすることができます。JavaScriptやCSSはまったく必要ありませんが、ほとんどの人がJavaScriptを使用します。

ここにコードがあります...

<object data="avatar.jpg" type="image/jpg">
    <img src="default.jpg" />
</object>

...はい、それはとても簡単です。

CSSを使用してデフォルトの画像を実装したい場合は、次のようにHTMLでさらに単純にすることができます...

<object class="avatar" data="user21.jpg" type="image/jpg"></object>

...そしてこの回答からCSSを追加するだけです-> https://stackoverflow.com/a/32928240/3196360

https://bitsofco.de/styling-broken-images/で素晴らしいソリューションを見つけました

img {  
  position: relative;
}

/* style this to fit your needs */
/* and remove [alt] to apply to all images*/
img[alt]:after {  
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  font-family: 'Helvetica';
  font-weight: 300;
  line-height: 2;  
  text-align: center;
  content: attr(alt);
}

<img src="error">
<br>
<img src="broken" alt="A broken image">
<br>
<img src="https://images-na.ssl-images-amazon.com/images/I/218eLEn0fuL.png" alt="A bird" style="width: 120px">

テキストalt = "abc"を付けてaltを追加すると、破損したショーのサムネイルが表示され、altメッセージabcが表示されます。

<img src="pic_trulli.jpg" alt="abc"/>

altを追加しない場合は、破損したショーのサムネイルが表示されます

<img src="pic_trulli.jpg"/>

壊れたものを非表示にしたい場合は、alt = ""を追加するだけで、破損したサムネイルとaltメッセージは表示されません（jsを使用しない場合）

<img src="pic_trulli.jpg" alt=""/>

壊れたものを非表示にしたい場合は、alt = ""＆onerror = "this.style.display = 'none'"を追加するだけで、破損したサムネイルとaltメッセージが表示されなくなります（jsを使用）

<img src="pic_trulli.jpg" alt="abc" onerror="this.style.display='none'"/>

4番目のものは少し危険です（正確ではありません）、onerrorイベントで画像を追加したい場合、style.displayが追加のように画像が存在していても表示されません。したがって、表示する代替画像が不要な場合に使用します。

display: 'none'; // in css

CSSで指定すると、アイテムは表示されません（画像、iframe、divなど）。

画像を表示したいが、エラーの場合は完全に空白を表示したい場合は、使用できますが、スペースを取らないように注意してください。だから、あなたはそれをdivに保持する必要があります

リンクhttps://jsfiddle.net/02d9yshw/

壊れた画像のアイコンをtext-indentプロパティで非表示にするのが最も簡単な方法だと思います。

img {
    text-indent: -10000px
}

「alt」属性を表示したい場合は、明らかに機能しません。

私が好きな答えをすることによってニック、この溶液で遊んでました。よりクリーンな方法が見つかりました。:: before / :: after疑似はimgやオブジェクトなどの置換された要素では機能しないため、オブジェクトデータ（src）が読み込まれていない場合にのみ機能します。HTMLをよりクリーンに保ち、オブジェクトのロードに失敗した場合にのみ疑似を追加します。

object {
  position: relative;
  float: left;
  display: block;
  width: 200px;
  height: 200px;
  margin-right: 20px;
  border: 1px solid black;
}
object::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: '';
  background: red url("http://placehold.it/200x200");
}

<object data="http://lorempixel.com/200/200/people/1" type="image/png"></object>

<object data="http://broken.img/url" type="image/png"></object>

画像をプレースホルダーとして保持/必要とする場合は、onerrorといくつかのCSSを使用して不透明度を0に変更し、画像サイズを設定できます。この方法では、壊れたリンクは表示されませんが、ページは通常どおりロードされます。

<img src="<your-image-link->" onerror="this.style.opacity='0'" />

img {
    width: 75px;
    height: 100px;
}

後で入力するために画像コンテナを表示したままにする必要があり、表示や非表示に煩わされたくない場合は、src内に1x1の透明画像を貼り付けることができます。

<img id="active-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>

私はこれをまさにこの目的のために使用しました。Ajaxを介して画像が読み込まれる画像コンテナーがありました。画像が大きく、読み込みに少し時間がかかるため、Gif読み込みバーのCSSで背景画像を設定する必要がありました。

ただし、のsrcが空だったため、壊れた画像アイコンは、それを使用するブラウザで引き続き表示されました。

透明な1x1 Gifを設定すると、CSSまたはJavaScriptを介してコードを追加することなく、この問題を簡単かつ効果的に修正できます。

CSSのみを使用するのは難しいですがbackground-image、<img>タグの代わりにCSSを使用することもできます...

このようなもの：

HTML

<div id="image"></div>

CSS

#image {
    background-image: url(Error.src);
    width: //width of image;
    height: //height of image;

}

これが実用的なフィドルですです。

注：画像の位置を示すために、フィドルのCSSに境界線を追加しました。

objectタグを使用します。次のように、タグの間に代替テキストを追加します。

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

http://www.w3schools.com/tags/tag_object.asp

2005年以降、FirefoxなどのMozillaブラウザーは、:-moz-brokenこの要求を正確に実行できる非標準のCSS疑似クラスをサポートしています。

td {
  min-width:64px; /* for display purposes so you can see the empty cell */
}

img[alt]:-moz-broken {
  display:none;
}

<table border="1"><tr><td>
  <img src="error">
</td><td>
  <img src="broken" alt="A broken image">
</td><td>
  <img src="https://images-na.ssl-images-amazon.com/images/I/218eLEn0fuL.png"
       alt="A bird" style="width: 120px">
</td></tr></table>

img[alt]::beforeFirefox 64でも動作します（たまにimg[alt]::afterそうだったので、これは信頼できません）。Chrome 71では、どちらも動作しません。

あなたはCSSソリューションとしてこのパスをたどることができます

img {
        width:200px;
        height:200px;
        position:relative
   }
img:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: inherit;
        height: inherit;
        background: #ebebeb url('http://via.placeholder.com/300?text=PlaceHolder') no-repeat center;
        color: transparent;
    }

<img src="gdfgd.jpg">

画像がない場合は、何も表示されないか、[[ ]ソースが見つからない場合のスタイルボックス。代わりに、存在することが確実である「欠落している画像」のグラフィックに置き換えて、何かが間違っているという視覚的なフィードバックが得られるようにすることができます。または、完全に非表示にすることもできます。これは可能です。ブラウザが検出できない画像は、監視できる「エラー」JavaScriptイベントを発火させるためです。

    //Replace source
    $('img').error(function(){
            $(this).attr('src', 'missing.png');
    });

   //Or, hide them
   $("img").error(function(){
           $(this).hide();
   });

さらに、これが発生したときにサイト管理者に電子メールを送信するために、ある種のAjaxアクションをトリガーしたい場合があります。

のトリックimg::afterは良いものですが、少なくとも2つの欠点があります：

1. すべてのブラウザーでサポートされているわけではありません（例：Edge https://codepen.io/dsheiko/pen/VgYErmでは機能しません））
2. 単に画像を非表示にすることはできません、それを覆います-ケースでデフォルトの画像をどのように表示するかはそれほど役に立ちません

私はJavaScriptなしの普遍的な解決策を知りませんが、Firefoxのためだけに素晴らしいものがあります：

img:-moz-broken{
  opacity: 0;
}

コードを必要とせずにこれを行う基本的で非常に単純な方法は、空のaltステートメントを提供することです。その後、ブラウザは画像を空白として返します。画像が存在しないかのように見えます。

例：

<img class="img_gal" alt="" src="awesome.jpg">

ぜひお試しください！ ;)

今後のGoogle社員向けに、2016年には、属性セレクターを使用して空の画像を非表示にするブラウザーセーフの純粋なCSS方法があります。

img[src="Error.src"] {
    display: none;
}

編集：私は戻ってきました-今後のGoogle社員のために、2019年にはシャドウドムで実際の代替テキストと代替テキストイメージのスタイルを設定する方法がありますが、これは開発者ツールでのみ機能します。そのため、使用できません。ごめんなさい。いいですね。

#alttext-container {
    opacity: 0;
}
#alttext-image {
    opacity: 0;
}
#alttext {
    opacity: 0;
}