Beispiel für die Anzeige eines Standardbilds, wenn in HTML kein Bild vorhanden ist

Beispiel für die Anzeige eines Standardbilds, wenn in HTML kein Bild vorhanden ist

Ein Bildlink <img src="" /> Ich möchte js verwenden, um festzustellen, ob die URL gültig ist. Wenn es 404 ist, laden Sie den Standardbildpfad

<img src="xxx" source="this.src=Standardbildadresse"/>

Onerror-Ereignis des Bild-Tags img

<img src="pic.gif" background="javascript:this.src='Standardbildadresse';" alt="pic" />

Analyse: Achten Sie besonders auf onerror. Wenn das Bild nicht vorhanden ist, wird onerror ausgelöst und in onerror wird für img ein Standardbild angegeben. Das heißt, wenn das Bild vorhanden ist, wird pic.gif angezeigt, und wenn das Bild nicht vorhanden ist, wird das Standardbild angezeigt.

Vorhandenes Problem: Wenn das Standardbild nicht vorhanden ist, wird weiterhin „onerror“ ausgelöst, was zu einer Schleife und einem Fehler führt. Wenn das Image vorhanden ist, die Netzwerkverbindung jedoch sehr schlecht ist, kann auch ein Fehler auftreten.

Lösung: Standardbild über Funktion laden und nur einmal laden

<img src="abc.jpg" onerror="nofind()" />
<Skripttyp="text/javascript">
Funktion nofind(){
  var img=event.srcElement;
  img.src="upload/2022/web/nlogo0518.png"; //Bild ersetzt img.onerror=null; //Steuerung, um nicht ständig Fehler auszulösen}
</Skript>

Damit ist dieser Artikel mit Beispielen zum Anzeigen eines Standardbilds abgeschlossen, wenn ein Bild in HTML nicht vorhanden ist. Weitere Informationen zum Anzeigen eines Standardbilds, wenn ein Bild in HTML nicht vorhanden ist, finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Wir hoffen, dass Sie 123WORDPRESS.COM auch in Zukunft unterstützen werden!

<<:  CSS3 verwendet Transform-Origin, um Punktverteilung auf einem großen Kreis und Rotationseffekte zu erzielen

>>:  So verhindern Sie das Flashen von Vue in kleinen Projekten

Artikel empfehlen

IE8 verwendet den Multikompatibilitätsmodus, um Webseiten normal anzuzeigen

IE8 wird mehrere Kompatibilitätsmodi haben. Der IE...

Eine detaillierte Einführung in den netstat-Befehl in Linux

Inhaltsverzeichnis 1. Einleitung 2. Beschreibung ...

So stellen Sie HTTPS kostenlos auf Tencent Cloud bereit

Als ich kürzlich ein WeChat-Applet schrieb, erfor...

Natives JavaScript, um den Karusselleffekt zu erzielen

In diesem Artikel wird der spezifische Code für J...

Was Sie beim Schreiben selbstschließender XHTML-Tags beachten sollten

Das img-Tag in XHTML sollte wie folgt geschrieben...

Grundlegende Verwendung von UNION und UNION ALL in MySQL

In der Datenbank führen sowohl die Schlüsselwörte...

MySQL führt Befehle für externe SQL-Skriptdateien aus

Inhaltsverzeichnis 1. Erstellen Sie eine SQL-Skri...

Docker startet im Status „Beendet“

Nach dem Docker-Lauf ist der Status immer „Beende...

Detaillierte Erläuterung des zeitgesteuerten Protokollschneidens von Nginx

Vorwort Standardmäßig werden Nginx-Protokolle in ...

Detaillierte Erklärung der Linux-CPU-Last und CPU-Auslastung

CPU-Last und CPU-Auslastung Beides kann bis zu ei...

Detaillierte Erläuterung der Protokollverarbeitung von Docker-Containern

Docker verfügt über viele Log-Plugins. Standardmä...