Wie kann ich ein Symbol mit Bildbruch nur mit CSS / HTML ausblenden?

Wie kann ich das Symbol für defekte Bilder ausblenden? Beispiel :

Ich habe ein Bild mit dem Fehler src:

<img src="Error.src"/>

Die Lösung muss in allen Browsern funktionieren.

CSS / HTML kann nicht erkennen, ob das Bild fehlerhaft ist. Daher müssen Sie JavaScript verwenden, egal was passiert

Hier ist jedoch eine minimale Methode, um entweder das Image auszublenden oder die Quelle durch ein Backup zu ersetzen.

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

oder

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

Aktualisieren

Sie können diese Logik auf mehrere Bilder gleichzeitig anwenden, indem Sie Folgendes tun:

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

Update 2

Für eine CSS - Option sehen michalzuber Antwort unten. Sie können nicht das gesamte Bild ausblenden, aber Sie ändern das Aussehen des defekten Symbols.

Trotz allem, was die Leute hier sagen, brauchen Sie überhaupt kein JavaScript, Sie brauchen nicht einmal CSS !!

Es ist eigentlich nur mit HTML sehr machbar und einfach. Sie können sogar ein Standardbild anzeigen, wenn ein Bild nicht geladen wird . Hier ist wie...

Dies funktioniert auch auf allen Browsern, auch so weit zurück wie IE8 (von 250.000 Besuchern zu Seiten , die ich im September 2015 statt, ZERO Menschen für etwas schlechter als IE8, was bedeutet diese Lösung funktioniert verwendeten buchstäblich alles ).

Schritt 1: Referenzieren Sie das Bild als Objekt anstelle eines Bilds . Wenn Objekte versagen, werden keine defekten Symbole angezeigt. Sie tun einfach nichts. Ab IE8 können Sie die Tags Object und Img austauschbar verwenden. Sie können die Größe ändern und all die großartigen Dinge tun, die Sie mit normalen Bildern tun können. Haben Sie keine Angst vor dem Objekt-Tag. Es ist nur ein Tag, nichts Großes und Sperriges wird geladen und es verlangsamt nichts. Sie verwenden nur das img-Tag mit einem anderen Namen. Ein Geschwindigkeitstest zeigt, dass sie identisch verwendet werden.

Schritt 2: (Optional, aber fantastisch) Kleben Sie ein Standardbild in dieses Objekt. Wenn das gewünschte Bild tatsächlich in das Objekt geladen wird, wird das Standardbild nicht angezeigt. So könnten Sie beispielsweise eine Liste von Benutzeravataren anzeigen, und wenn jemand noch kein Bild auf dem Server hat, könnte es das Platzhalterbild anzeigen ... überhaupt kein Javascript oder CSS erforderlich, aber Sie erhalten die Funktionen von was nimmt die meisten Leute JavaScript.

Hier ist der Code ...

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

... Ja, so einfach ist das.

Wenn Sie Standardbilder mit CSS implementieren möchten, können Sie dies in Ihrem HTML-Code noch einfacher machen ...

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

... und fügen Sie einfach das CSS aus dieser Antwort hinzu -> https://stackoverflow.com/a/32928240/3196360

Fand eine tolle Lösung bei https://bitsofco.de/styling-broken-images/ wurde

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

Wenn Sie alt mit dem Text alt = "abc" hinzufügen , werden die Miniaturansichten der beschädigten Show und die alt-Nachricht abc angezeigt

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

Wenn Sie nicht alt hinzufügen, wird die Miniaturansicht der beschädigten Show angezeigt

<img src="pic_trulli.jpg"/>

Wenn Sie das kaputte ausblenden möchten, fügen Sie einfach alt = "" hinzu. Es werden keine beschädigten Miniaturansichten und keine Alt-Meldungen angezeigt (ohne Verwendung von js).

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

Wenn Sie das kaputte ausblenden möchten, fügen Sie einfach alt = "" & onerror = "this.style.display = 'none'" hinzu. Es werden keine beschädigten Miniaturansichten und keine Alt-Meldung (mit js) angezeigt.

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

Das vierte ist ein wenig gefährlich (nicht genau). Wenn Sie ein Bild in einem Fehlerereignis hinzufügen möchten, wird es nicht angezeigt, selbst wenn das Bild als style.display vorhanden ist. Verwenden Sie es also, wenn Sie kein alternatives Bild für die Anzeige benötigen.

display: 'none'; // in css

Wenn wir es in CSS geben, wird das Element nicht angezeigt (wie Bild, Iframe, Div so).

Wenn Sie ein Bild anzeigen möchten und im Fehlerfall ein völlig leeres Leerzeichen anzeigen möchten, können Sie es verwenden, aber seien Sie auch vorsichtig, dass dies kein Leerzeichen beansprucht. Also, Sie müssen es in einem div halten, kann sein

Link https://jsfiddle.net/02d9yshw/

Ich denke, der einfachste Weg ist, das Symbol für defekte Bilder durch die Eigenschaft text-indent auszublenden.

img {
    text-indent: -10000px
}

Offensichtlich funktioniert es nicht, wenn Sie das Attribut "alt" sehen möchten.

Ich mochte die Antwort von Nick und spielte mit dieser Lösung herum. Fand eine sauberere Methode. Da :: before / :: after-Pseudos bei ersetzten Elementen wie img und object nicht funktionieren, funktionieren sie nur, wenn die Objektdaten (src) nicht geladen sind. Es hält den HTML-Code sauberer und fügt das Pseudo nur hinzu, wenn das Objekt nicht geladen werden kann.

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>

Wenn Sie das Bild als Platzhalter behalten möchten / benötigen, können Sie die Deckkraft mit einem Fehler und etwas CSS auf 0 ändern, um die Bildgröße festzulegen. Auf diese Weise sehen Sie den defekten Link nicht, aber die Seite wird wie gewohnt geladen.

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

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

Wenn Sie den Bildcontainer weiterhin sichtbar haben müssen, weil er später ausgefüllt wird, und sich nicht darum kümmern möchten, ihn ein- und auszublenden, können Sie ein transparentes 1x1-Bild in die src kleben:

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

Ich habe das genau für diesen Zweck verwendet. Ich hatte einen Bildcontainer, in den ein Bild über Ajax geladen werden sollte. Da das Bild groß war und das Laden etwas dauerte, musste ein Hintergrundbild in CSS einer Gif-Ladeleiste festgelegt werden.

Da die src von leer war, wurde das Symbol für fehlerhafte Bilder in Browsern, die es verwenden, weiterhin angezeigt.

Das Einstellen des transparenten 1x1-Gif behebt dieses Problem einfach und effektiv, ohne dass Code über CSS oder JavaScript hinzugefügt werden muss.

Nur CSS zu verwenden ist schwierig, aber Sie können background-imagestattdessen auch CSS verwenden<img> Tags verwenden ...

Etwas wie das:

HTML

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

CSS

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

}

Hier ist eine funktionierende Geige .

Hinweis: Ich habe den Rand im CSS auf der Geige hinzugefügt, um zu demonstrieren, wo sich das Bild befinden würde.

Verwenden Sie das Objekt-Tag. Fügen Sie alternativen Text zwischen den Tags wie folgt hinzu:

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

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

Seit 2005 unterstützen Mozilla-Browser wie Firefox die nicht standardmäßige :-moz-brokenCSS-Pseudoklasse, die genau diese Anforderung erfüllen kann:

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]::beforefunktioniert auch in Firefox 64 (obwohl es einmal so war img[alt]::after, ist dies nicht zuverlässig). Ich kann keines davon in Chrome 71 zum Laufen bringen.

Sie können diesem Pfad als CSS-Lösung folgen

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

Fehlende Bilder zeigen entweder nur nichts an oder ein [? ] Stilfeld, wenn ihre Quelle nicht gefunden werden kann. Stattdessen möchten Sie diese möglicherweise durch eine Grafik mit "fehlendem Bild" ersetzen, von der Sie sicher sind, dass sie vorhanden ist, damit Sie besser visuell wissen, dass etwas nicht stimmt. Oder Sie möchten es möglicherweise vollständig ausblenden. Dies ist möglich, da Bilder, die ein Browser nicht finden kann, ein "Fehler" -JavaScript-Ereignis auslösen, auf das wir achten können.

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

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

Darüber hinaus möchten Sie möglicherweise eine Ajax-Aktion auslösen, um in diesem Fall eine E-Mail an einen Site-Administrator zu senden.

Der Trick mit img::afterist ein gutes Zeug, hat aber mindestens 2 Nachteile:

1. wird nicht von allen Browsern unterstützt (z. B. funktioniert nicht unter Edge https://codepen.io/dsheiko/pen/VgYErm )
2. Sie können das Bild nicht einfach ausblenden, Sie decken es ab - also nicht so hilfreich, wenn Sie ein Standardbild in dem Fall anzeigen möchten

Ich kenne keine universelle Lösung ohne JavaScript, aber nur für Firefox gibt es eine nette:

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

Eine grundlegende und sehr einfache Möglichkeit, dies ohne Code zu tun, besteht darin, nur eine leere alt-Anweisung anzugeben. Der Browser gibt das Bild dann als leer zurück. Es würde genauso aussehen, wenn das Bild nicht da wäre.

Beispiel:

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

Probieren Sie es aus, um zu sehen! ;)

Für zukünftige Googler gibt es 2016 eine browsersichere reine CSS-Methode, um leere Bilder mithilfe der Attributauswahl auszublenden:

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

Bearbeiten: Ich bin zurück - für zukünftige Googler gibt es 2019 eine Möglichkeit, den tatsächlichen Alternativtext und das Alternativtextbild im Shadow Dom zu formatieren, dies funktioniert jedoch nur in Entwicklertools. Sie können es also nicht verwenden. Es tut uns leid. Es wäre so schön.

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