Fehlende Bilder zeigen entweder gar nichts an oder eine Box im Stil von [ ? ], wenn ihre Quelle nicht gefunden werden kann. Stattdessen möchten Sie dies vielleicht durch eine "fehlende Bild"-Grafik ersetzen, von der Sie sicher sind, dass sie existiert, um eine bessere visuelle Rückmeldung zu geben, dass etwas nicht stimmt. Oder Sie möchten es vielleicht komplett ausblenden. Dies ist möglich, da Bilder, die ein Browser nicht finden kann, ein "error"-JavaScript-Ereignis auslösen, das wir beobachten können.
// Replace source
$('img').on("error", function() {
$(this).attr('src', '/images/missing.png');
});
// Or, hide them
$("img").on("error", function() {
$(this).hide();
});
Zusätzlich möchten Sie möglicherweise eine Art Ajax-Aktion auslösen, um eine E-Mail an einen Website-Administrator zu senden, wenn dies geschieht.
Obwohl dies nett ist und ich nicht wusste, dass `img`s einen Fehler auslösen, wenn sie nicht geladen werden können, scheint der Nutzen eines solchen Blocks gering und für etwas, das nicht sehr oft vorkommen sollte, etwas überladen (Anhängen eines Event-Listeners an jedes `img` auf einer Seite).
Ich könnte mir vorstellen, dass dies in Fällen nützlich ist, in denen Benutzerinhalte (UGC) erstellt werden und der Benutzer ein Bild hochlädt. Sie könnten versuchen, das Bild anzuzeigen, wenn es vom Server verarbeitet wurde, und andernfalls einen Platzhalter anzeigen.
Nach meiner Erfahrung erkennen Chrome und Firefox, wenn Bilder nicht geladen werden, und protokollieren dies in der Konsole, bin mir bei anderen Browsern nicht sicher.
Hallo,
Das ist Chandru aus Chennai (Indien)...
Sie haben eine erstaunliche Seite. Jede Arbeit ist für mich nützlich.
Mach weiter so, Alter...
Ich möchte das unbedingt auf meiner Seite implementieren, aber einige der Bilder werden über ein PHP-Skript gerendert, und dieser Code versteckt diese Bilder aus irgendeinem Grund. Kann mir jemand helfen? Ich mag dieses hässliche kleine Icon nicht, das angezeigt wird. Ich habe ein Bild hinter der Stelle, wo das gerenderte Bild sein sollte, falls es nicht gerendert werden kann, weil es versucht, ein Minecraft-Skin herunterzuladen, und wenn ein Benutzer keines hochgeladen hat, wird das Standardbild nicht gerendert.
Ups, egal. Funktioniert jetzt. Habe nur ein wenig herumgespielt und es geschafft.
Ich wünschte, Sie hätten Ihre Lösung bereitgestellt, da ich dasselbe Problem habe.
Leider funktioniert dies in IE nicht – auch nicht in IE 9.
Großartig!! Mein Fehler ist behoben :)
Nein, doch nicht beim zweiten Hinsehen :((
Ich bekomme Icons für fehlende Bilder beim Hovern über mein Menü, wie kann ich damit umgehen??
Es funktioniert nicht für Hintergrundbilder.
Sie müssen etwas zum Skript hinzufügen, wenn dies Ihr Fall ist.
In Chrome (vergessen zu erwähnen)
Hallo allerseits, ich kann das nicht zum Laufen bringen. Wie sollte der Code aussehen und wo platziere ich ihn vor dem `head` oder dem Ende des `body`?
Ich habe etwas Ähnliches gemacht, aber dann festgestellt, dass dies eine schlechte Wahl ist.
Defekte Bilder werden nicht immer durch ungültige URLs oder nicht existierende Dateien verursacht, sie können durch vorübergehende Netzwerkprobleme oder langsame Verbindungen verursacht werden.
Durch das Ändern des `img src` eines defekten Bildes erhalten Benutzer keine Chance zu sehen, was die **echte Quelle** ist (Rechtsklick – Bildinformationen anzeigen). Es ist noch schlimmer, das defekte Bild auszublenden, da es völlig unsichtbar ist.
Meine Lösung ist also, das defekte Bild des Browsers so zu belassen, wie es ist, und ein Klick-Ereignis zum Neuladen des Bildes zum Bild hinzuzufügen.
Für einige Browser müssen Sie möglicherweise Abmessungen und einen Rahmen angeben, `
.broken-image {width: 16px !important; height: 16px !important; border: 1px solid #aaa;}`, sonst ist das Bild unsichtbar. Und entfernen Sie die Klasse beim Laden des Bildes.Ich habe keine Ahnung, wohin ich diesen Code einfügen soll.
Können Sie mir bitte mehr Details zeigen?
Es ist tatsächlich in Ihrem CSS-Stylesheet, aber ich denke, das Posten hier ist absolut eine schlechte Idee.
Warum versuchen Sie nicht, `background-image: url(whatever_image_name_is.jpg);` zu verwenden?
Wenn Sie keinen leeren Platz benötigen, sodass das Hintergrundbild vorhanden ist, wenn das Bild nicht richtig geladen wird, anstatt das Bild mit Jquery zu verbergen oder zu ersetzen.
Ein Entwickler würde total verstehen, was ich meine.
Ich bin Precious Tom aus Nigeria...
$(document).ready(function() {
$(“img”).error(function() {
$(this).hide();
});
});
...und dann wartet es, bis die Seite vollständig geladen ist und verbirgt dann die `img`s.
Kann zu Flackern führen, verbirgt aber sicherlich alles, was verborgen werden muss.
Hallo Sakknekedro,
Tolle Lösung, aber dieses Flackern, das Sie bemerken, kann leicht vermieden werden, indem man nicht wartet, bis das Dokument "bereit" ist, bevor die Bilder ausgeblendet werden.
Okay, warum rendert es keine Markdown-Codeblöcke?
Dies war genau das, was ich nicht wusste, dass ich es brauchte! Ich habe allerdings einiges daran geändert.... Auf diese Weise wäre die Originalquelle immer noch sichtbar und Rechtsklick sollte funktionieren.
JS
CSS
noImg {
position: relative;
border: 1px solid lightgrey;
background-image: url(http://sirsyedcollege.org/wp-content/themes/EducationAcademy/images/no-image_980x516.jpg);
background-position: 50% 50%;
background-repeat: no-repeat;
-moz-background-size: contain;
-o-background-size: contain;
-webkit-background-size: contain;
background-size: contain;
height: 75px;
width: 126px;
content: "";
margin: 0 10px 10px 0;
}
shorthand
.noImg {
position: relative;
border: 1px solid lightgrey;
background: url(http://sirsyedcollege.org/wp-content/themes/EducationAcademy/images/no-image_980x516.jpg) 50% 50%/contain no-repeat;
height: 75px;
width: 126px;
content: "";
margin: 0 10px 10px 0;}
PS!
Bildnachweis, wo das Bild gestohlen wurde, bitte durch eigenes ersetzen :)
Habe vergessen, `Sakknekedro` gutzuschreiben.
In Safari 6.0.5 haben `width` und `height` keine Auswirkung, wenn Sie kein Hintergrundbild, sondern nur eine Hintergrundfarbe verwenden und `content: ""` verwenden. Da `content: ""` hier der entscheidende Faktor ist, um sowohl das `?`-Symbol als auch den inneren weißen Rahmen auszublenden, funktioniert dies, wenn Sie nur einen benutzerdefinierten Platzhalter mit Hintergrundgröße wünschen.
Ich bin verrückt geworden, als ich versucht habe, diese weiße Umrandung bei einem defekten Bild zu deaktivieren, als mein Last.fm-Skript kein Albumcover gefunden hat. Ich bin froh, diesen Beitrag gefunden zu haben.
Ich glaube, `error` ist veraltet? Funktioniert das nicht in jQuery über 1.8?
Heutzutage (ich glaube ab jQuery 1.7) würden Sie etwas wie Folgendes tun:
Dies würde einen Event-Listener am Dokument für `img`-Kindelemente anhängen, im Gegensatz zur ursprünglichen Methode, die einen Listener an jedes Bildelement anhängte.
Das funktioniert leider nicht, da der Browser Fehler nicht nach oben blubbert.
http://stackoverflow.com/a/18683695/18706
Lustige Lösung für alle AngularJS-Benutzer..
WidgetApp.directive(‘img’, function(){
return {
restrict:’E’,
link:function(scope,element){
element.error(function(){
$(this).hide();
})
}
}
});
Entschuldigung dafür – habe auf "Senden" geklickt, bevor ich geprüft habe, ob es richtig gerendert wird.
Schöne kleine Lösung. Aber wie verhindert man das Flackern?
Ich verwende es, um ein Standardbild für einen Benutzer anzuzeigen, wenn dieser keines hochgeladen hat (keine Bilddaten im Bildstandort).
Das hat bei mir funktioniert, danke! Aber ich musste auch diesen Code zum Bild hinzufügen, damit es funktioniert.
Guy Mograbi, danke für den Angular-Code!
Funktioniert vielleicht für Bilder, die nicht gefunden werden, aber was ist mit blockierten Bildern? Mir ist aufgefallen, dass dies nicht wirklich funktioniert, wenn ein Bild aus irgendeinem Grund blockiert wird (z. B. gemischter SSL-Inhalt) – funktionierte nur in Firefox. Um es zum Laufen zu bringen, habe ich die Funktion nach dem Laden der Seite mit einem 10-Millisekunden-Timeout ausgeführt; verursacht manchmal ein Flackern, behandelt aber alle defekten Bilder recht gut.
Mein Code
Funktioniert in allen Browsern.
viiiel …….. danke Alter, du hast dieses große Problem gelöst.
Danke Eitz, es funktioniert für mich!
Beachten Sie, dass das `error`-Ereignis in Firefox nicht ausgelöst wird, wenn die `src` leer ist. In diesem Fall wird immer noch der Platzhalter für fehlende Bilder gerendert.
Bitte verwenden Sie nicht den Vorschlag von Eitz.
Was ist mit dem Ausblenden von Fehlern aus der Konsole?
Bei mir funktionierte es nicht beim ersten Laden, es funktionierte erst nach dem Aktualisieren der Seite. Aber es begann zu funktionieren, als ich die folgenden Änderungen vornahm:
$(window).load(function () {
$(‘img’).each(function () {
if (!this.complete || typeof this.naturalWidth == “undefined” || this.naturalWidth == 0) {
// if image was broken, replace with new image
this.src = ‘/Images/no_picture.gif’;
}
});
});
Beachten Sie, dass das `error`-Ereignis in Firefox nicht ausgelöst wird, wenn die `src` leer ist. In diesem Fall wird immer noch der Platzhalter für fehlende Bilder gerendert.
Bitte verwenden Sie nicht den Vorschlag von Eitz.
Sehr nützlich, danke!
Sie können auch `.htaccess`-Rewrites für fehlende Dateien zu anderen Assets verwenden, wie hier vorgeschlagen.
Wenn Sie eine bestimmte Ordnerstruktur verwenden, können Sie auch spezifische Ersetzungen für einen bestimmten Pfad bereitstellen, z. B.
Außerdem habe ich einen Antwort-Header mit dem Redirect von 307 für SEO hinzugefügt, ist das richtig?
Ja, Sir! Das ist die einzige Lösung, die für mich funktioniert hat. +1
Diese Lösungen sind großartig, aber darf ich eine kleine Änderung am ersten Beispiel hinzufügen. Ich würde ändern
zu diesem
Wenn aus irgendeinem Grund die Datei `missing.png` nicht gefunden werden kann, gerät der Browser in eine Endlosschleife bei der Fehlerbehandlung. Um dies zu vermeiden, stellen Sie ein, dass das Ereignis nur einmal ausgeführt wird und dann ungebunden wird.
Dies funktioniert nur für Elemente und wenn das Skript ausgeführt wird, bevor der Bildfehler ausgelöst wird. Das ist keine völlig zuverlässige Aussage, es sei denn, Sie stellen sicher, dass Ihr Skript synchron vor Ihren Bildern geladen wird.
Von http://stackoverflow.com/questions/1977871/check-if-an-image-is-loaded-no-errors-in-javascript#1978021
Eine andere Option ist das Auslösen der `onload`- und/oder `onerror`-Ereignisse, indem ein Bildelement im Speicher erstellt und sein `src`-Attribut auf das ursprüngliche `src`-Attribut des Originalbildes gesetzt wird. Hier ist ein Beispiel, was ich meine
Wenn Sie hier landen, wissen Sie, dass die `onerror`-Funktion für Bilder veraltet ist. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Browser_compatibility
wie sieht es mit dieser Situation aus
<img src="/fail-source-image.jpg" onerror="/fail-fallback-source-image.jpg">Beide Bilder schlagen fehl beim Laden. Es kommt irgendwie zu einer Endlosschleife beim Laden, weil "onerror" immer da ist? Angenommen, beide Bilder sind "*.webp" und Sie verwenden Safari.
Was haltet ihr von dem folgenden Code, ich weiß, dass etwas falsch daran ist, aber trotzdem... ich kann es nicht finden.
Vielen Dank.
<img src="/fail-source-image.jpg" data-src="" onerror="if(!this.dataset.load) {this.src='/fail-fallback-source-image.jpg'; this.dataset.load = 1 }">gefährlich, stellen Sie sicher, dass das Standardbild dort ist. Andernfalls wird es unendlich oft aufgerufen.
kann das auch bei einem iframe funktionieren?
Danke!!!! Das funktioniert in Safari, Firefox und Chrome.
Cooler Beitrag!
Kannst du etwas über die Gestaltung von defekten Bildern posten?
Ich habe andere Beiträge im Internet gesehen, und ich weiß, dass es möglich ist, aber ich möchte deine Version sehen :)
Jetzt funktionieren alle Lösungen, die ich von Ihrer Website finde, und sind sehr effektiv. Ich möchte nur Ihre harte Arbeit würdigen.
Vielen Dank