web-dev-qa-db-ja.com

CSS / HTMLのみを使用して壊れたアイコンを隠す方法（jsなし）

壊れた画像アイコンを非表示にする方法例： Example

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

<img src="Error.src"/>

解決策はすべてのブラウザで機能する必要があります。

JSではなくCSSまたはHTMLのみを使用してください。

htmlcsshtml5css3
143
Geray Suinov

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's answer を参照してください。画像全体を隠すことはできませんが、壊れたアイコンの外観を変更することはできます。

229
Kevin Jantzer

人々がここで言っていることにもかかわらず、あなたはまったくJavaScriptを必要としません、あなたはCSSさえ必要としません！

それは実際には非常に実行可能で、HTMLだけで単純です。 画像が読み込まれない場合でも、デフォルトの画像を表示できます。これはどうですか...

これは、IE 8から遠く離れた（2015年9月にホストしたサイトへの25万人を超える訪問者のうち、ZERO人が使用したものまで） IE8より悪い何か、この解決法は文字通りすべて）でうまくいくことを意味します。

手順1：imgではなく、オブジェクトとして画像を参照します。オブジェクトが失敗したとき、それらは壊れたアイコンを表示しません。彼らはただ何もしません。 IE 8以降では、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/319636

121
Nick Steele

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">
55
michalzuber

最も簡単な方法は、text-indentプロパティで壊れた画像アイコンを隠すことだと思います。

img {
    text-indent: -10000px
}

あなたが "alt"属性を見たければ明らかにそれは機能しません。

16
Burnee

画像をプレースホルダとして保持または必要とする場合は、エラーと画像サイズを設定するcssを使用して、不透明度を0に変更できます。こうすれば壊れたリンクは見えませんが、ページは通常どおりにロードされます。

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

.img {
    width: 75px;
    height: 100px;
}
14
Ewald Bos

answer by Nick が気に入っていて、この解決策を試していました。よりきれいな方法を見つけました。 :: before/:: after疑似はimgやobjectのような置き換えられた要素に対しては機能しないので、オブジェクトデータ（src）がロードされていない場合にのみ機能します。それはHTMLをよりクリーンに保ち、オブジェクトがロードに失敗した場合にのみ擬似を追加します。

http://codepen.io/anon/pen/xwqJKQ

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

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

object {
  position: relative;
  float: left;
  display: block;
  width: 200px;
  height: 200px;
  margin-right: 20px;
  border: 1px solid black;

  &::after {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    content: '';
    background: red url('http://placehold.it/200x200');
  }
}
14
Bartezz

CSSだけを使うのは難しいですが、background-imageタグの代わりにCSSの<img>を使うことができます。

このようなもの：

HTML

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

CSS

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

}

これが作業中です フィドル 。

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

7
Dryden Long

後で塗りつぶされているために画像コンテナを表示させる必要があり、それを表示したり隠したりしたくない場合は、1×1の透明画像をsrcの内側に貼り付けることができます。

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

私はこれを正確な目的のために使用しました。私はAjaxを介してそれにロードされるイメージを持つことになるだろうイメージコンテナを持っていました。画像が大きくてロードに少し時間がかかるので、GifローディングバーのCSSにbackground-imageを設定する必要がありました。

しかし、のsrcが空だったので、壊れた画像アイコンはそれを使うブラウザにまだ現れました。

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

6
user2596313

あなたがテキストalt = "abc"でaltを追加するならば、それはショー破損サムネイルを見せます、そして、altメッセージabc

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

1st

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

<img src="pic_trulli.jpg"/>

2nd

壊れたものを非表示にしたい場合は、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'"/>

onerrorイベントで画像を追加したい場合、imageがstyle.displayとして追加されたようなものであっても表示されません。そのため、代替画像を表示する必要がない場合に使用してください。

display: 'none'; // in css

CSSで指定した場合、アイテムは表示されません（image、iframe、divのように）。

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

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

6
P Satish Patro

オブジェクトタグを使用してください。このようにタグの間に代替テキストを追加します。

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

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

3
ThomasAFink

画像が見つからない場合は、何も表示されないか、または[？が表示されます。 ]ソースが見つからない場合はスタイルボックス。代わりに、あなたはそれをあなたが確かに存在すると確信できる「行方不明の画像」グラフィックと取り替えたいかもしれません。または、それを完全に隠したいと思うかもしれません。これは可能です。ブラウザが見つけられない画像が、私たちが監視できる「エラー」JavaScriptイベントを発生させるからです。

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

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

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

2
Ali panahiyan

あなたは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">
2
Cenk YAGMUR

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]::beforeはFirefox 64でも動作します（昔はimg[alt]::afterだったのでこれは信頼できません）。どちらもChrome 71で動作させることはできません。

1
Adam Katz

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

  1. すべてのブラウザでサポートされているわけではありません（例：Edgeでは動作しません https://codepen.io/dsheiko/pen/VgYErm ）
  2. あなたは単純に画像を隠すことはできません、あなたはそれを覆います - あなたがその場合にあなたが何をデフォルトの画像を見せるべきかというときそれほど役に立ちません

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

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