it-swarm.com.de

So verbergen Sie ein Symbol mit gebrochenem Bild, das nur CSS/HTML (ohne js) verwendet

Wie kann ich das defekte Bildsymbol ausblenden? Beispiel : Example

Ich habe ein Bild mit dem Fehler src:

<img src="Error.src"/>

Die Lösung muss in allen Browsern funktionieren.

Verwenden Sie nur CSS oder HTML, nicht JS.

128
Geray Suinov

Es gibt keine Möglichkeit für CSS/HTML, zu wissen, ob das Bild einen fehlerhaften Link aufweist. Daher müssen Sie in jedem Fall JavaScript verwenden

Es gibt jedoch eine minimale Methode, um das Image entweder 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 wie folgt vorgehen:

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 siehe michalzubers Antwort unten. Sie können nicht das gesamte Bild ausblenden, Sie ändern jedoch das Aussehen des defekten Symbols.

211
Kevin Jantzer

Ungeachtet dessen, 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 mit allen Browsern, selbst mit IE8 (von mehr als 250.000 Besuchern auf Websites, die ich im September 2015 gehostet habe). [~ # ~] zero [~ # ~] Leute verwendeten etwas Schlimmeres als IE8, was bedeutet, dass diese Lösung für buchstäblich alles funktioniert ).

Schritt 1: Verweisen Sie auf das Bild als Objekt anstelle eines Bilds . Wenn Objekte versagen, werden keine beschädigten Symbole angezeigt. sie machen einfach nichts. Ab IE8 können Sie die Tags Object und Img austauschbar verwenden. Sie können die Größe ändern und all das, was Sie können, auch mit normalen Bildern tun. 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 werden nur das img-Tag mit einem anderen Namen verwenden. Ein Geschwindigkeitstest zeigt, dass sie identisch verwendet werden.

Schritt 2: (Optional, aber großartig) Stecken Sie ein Standardbild in dieses Objekt. Wenn das gewünschte Bild tatsächlich geladen wird im Objekt, wird das Standardbild nicht angezeigt. Sie könnten zum Beispiel eine Liste von Benutzeravataren anzeigen, und wenn jemand noch kein Bild auf dem Server hat, könnte es das Platzhalterbild anzeigen ... kein Javascript oder CSS erforderlich, aber Sie erhalten die Funktionen von was nimmt die meisten Menschen 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 gestalten ...

<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/319636

125
Nick Steele

Fand eine tolle Lösung unter 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">

53
michalzuber

Ich denke, der einfachste Weg ist, das defekte Bildsymbol durch die Texteinzugs-Eigenschaft zu verbergen.

img {
    text-indent: -10000px
}

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

13
Burnee

Ich mochte die answer von Nick und spielte mit dieser Lösung herum. Eine sauberere Methode gefunden. Da :: before/:: after Pseudos nicht mit ersetzten Elementen wie img und object funktionieren, funktionieren sie nur, wenn die Objektdaten (src) nicht geladen sind. Dadurch wird der HTML-Code sauberer und der Pseudo wird nur hinzugefügt, wenn das Objekt nicht geladen wird.

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');
  }
}
12
Bartezz

in dem Fall, dass Sie das Bild als Platzhalter behalten möchten/benötigen, können Sie die Deckkraft mit einem Fehler und einigen CSS-Werten auf 0 ändern, um die Bildgröße festzulegen. Auf diese Weise sehen Sie den defekten Link nicht, aber die Seite wird normal geladen.

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

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

Die Verwendung von CSS ist nur schwer, aber Sie können background-image von CSS anstelle von <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: http://jsfiddle.net/xbK6g/

Hinweis: Ich habe den Rahmen in der CSS-Spalte hinzugefügt, um zu zeigen, wo sich das Bild befinden würde.

9
Dryden Long

Wenn der Bildcontainer noch sichtbar sein muss, weil er später ausgefüllt wird, und Sie sich nicht mit dem Anzeigen und Ausblenden der Bilder befassen möchten, können Sie ein 1x1-transparentes Bild in den Quellcode einfügen:

<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 etwas geladen werden musste, musste in CSS ein Hintergrundbild einer Gif-Ladeleiste eingestellt werden.

Da jedoch die src leer war, wurde das Symbol für das defekte Bild in Browsern angezeigt, in denen es verwendet wurde.

Wenn Sie das transparente 1x1-Gif festlegen, wird dieses Problem einfach und effektiv behoben, ohne dass Code oder CSS hinzugefügt werden muss.

6
user2596313

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

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

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

2
FinkAvenue

Fehlende Bilder zeigen entweder nichts oder ein [? ] Stil-Box, wenn ihre Quelle nicht gefunden werden kann. Stattdessen möchten Sie möglicherweise die Grafik durch ein "fehlendes Bild" ersetzen, von dem Sie sicher sind, dass es eine bessere visuelle Rückmeldung gibt, dass etwas nicht stimmt. Oder möchten Sie es komplett ausblenden. Dies ist möglich, da Bilder, die ein Browser nicht finden kann, von einem "fehlerhaften" JavaScript-Ereignis ausgelöst werden, 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 Art Ajax-Aktion auslösen, um in diesem Fall eine E-Mail an einen Site-Administrator zu senden.

2
Ali panahiyan

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

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 funktioniert auch in Firefox 64 (obwohl dies früher einmal img[alt]::after war, ist dies nicht zuverlässig). Ich kann keine davon in Chrome 71 zum Arbeiten bringen.

1
Adam Katz

Sie können diesen Pfad als CSS-Lösung verfolgen

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

1
Cenk YAGMUR

Der Trick mit img::after ist eine gute Sache, hat aber mindestens zwei Nachteile:

  1. wird nicht von allen Browsern unterstützt (funktioniert beispielsweise nicht auf Edge https://codepen.io/dsheiko/pen/VgYErm )
  2. sie können das Bild nicht einfach verbergen, Sie verdecken es. Daher ist es nicht hilfreich, wenn Sie ein Standardbild im Fall anzeigen

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

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

Wenn Sie alt mit dem Text alt = "abc" hinzufügen, werden das beschädigte Vorschaubild und die Alt-Meldung abc angezeigt

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

 1st 

Wenn Sie kein alt hinzufügen, wird die beschädigte Miniaturansicht angezeigt

<img src="pic_trulli.jpg"/>

 2nd 

Wenn du das kaputte verstecken willst, füge einfach alt = "" hinzu, es wird kein beschädigtes Vorschaubild und keine Alternativnachricht angezeigt (ohne js)

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

Wenn du das kaputte verstecken willst, füge einfach alt = "" & onerror = "this.style.display = 'none'" es wird kein beschädigtes Vorschaubild und keine Alternativnachricht angezeigt (mit js)

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

4. ist ein wenig gefährlich (nicht genau), wenn Sie ein Bild in einem Fehlerereignis hinzufügen möchten, wird es nicht angezeigt, auch wenn Bild vorhanden ist

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

0
P Satish Patro