Verwenden Sie Javascript, um festzustellen, ob das Bild vorhanden ist. Wenn es nicht vorhanden ist, zeigen Sie den Code des Standardbilds an

In Websites oder Anwendungen müssen wir manchmal ein Bild anzeigen, sind uns aber nicht sicher, ob das Bild existiert oder ob es auf dem Server gelöscht wurde. Wenn das Bild zu diesem Zeitpunkt direkt angezeigt wird, können Fehler auftreten. Um dieses Problem zu lösen, können wir mithilfe von Javascript-Code feststellen, ob das Bild vorhanden ist, und ein Standardbild anzeigen, wenn das Bild nicht vorhanden ist. In diesem Artikel wird erläutert, wie Sie diese Funktion mithilfe von Javascript implementieren.

Zuerst müssen wir das anzuzeigende Bild in ein div- oder img-Tag einschließen und im Tag ein benutzerdefiniertes Attribut src-real festlegen, um den tatsächlichen Pfad des Bildes zu speichern. Der Code lautet wie folgt:

<div class="image-container">
  <img class="image" src="" src-real="path/to/image.jpg">
</div>

Als Nächstes können wir mithilfe von Javascript feststellen, ob das Bild vorhanden ist. Mithilfe der Ereignisse onload und onerror des Image-Objekts kann die entsprechende Ereignisverarbeitungsfunktion ausgelöst werden, wenn das Laden des Bildes abgeschlossen ist oder fehlschlägt. Wir können das src-Attribut des Bildes im Ladeabschlussereignis onload auf den echten Pfad src-real setzen, um das Bild im Ladefehlerereignis onerror wie gezeigt auf den Pfad des Standardbildes zu setzen unten:

// 获取所有要判断的图片节点
const images = document.querySelectorAll('.image')

// 循环遍历每个图片节点
images.forEach(image => {

  // 创建一个新的Image对象
  const img = new Image()

  // 加载完成，显示实际图片
  img.onload = () => {
    image.src = image.getAttribute('src-real')
  }

  // 加载失败，显示默认图片
  img.onerror = () => {
    image.src = 'path/to/default-image.jpg'
  }

  // 设置Image对象的src属性并加载图片
  img.src = image.getAttribute('src-real')
})

Im obigen Code erhalten wir zunächst alle zu beurteilenden Bildknoten über die Methode querySelectorAll und durchlaufen jeden Bildknoten in einer Schleife. Dann haben wir ein neues Image-Objekt erstellt und seine Onload- und Onerror-Ereignishandler festgelegt. Wenn das Bild geladen wird, können wir den tatsächlichen Pfad src-real des Bildes über die Methode getAttribute abrufen und den Pfad dem src-Attribut des Bildknotens zuweisen, um das tatsächliche Bild anzuzeigen Das Laden schlägt fehl. Wenn das Ereignis onerror ausgelöst wird, können wir das src-Attribut des Bildknotens auf den Pfad des Standardbilds setzen, um das Standardbild anzuzeigen.

Abschließend müssen wir den Stil des Standardbilds in CSS festlegen, damit das korrekte Standardbild angezeigt werden kann, wenn das Bild nicht geladen werden kann. Der Code lautet wie folgt:

.image {
  width: 300px;
  height: 200px;
  background-color: #ddd;
}

.image[src*="default"] {
  background-image: url('path/to/default-image.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}

Im obigen Code legen wir zunächst die Breite, Höhe und Hintergrundfarbe des Bildes fest. Dann verwenden wir den CSS-Attributselektor [src*="default"], um alle Bildknoten auszuwählen, die „default“ im src-Attribut enthalten, und setzen dann das Hintergrundbild des Bildknotens auf den Pfad des Standardbilds, also um den Standardbildeffekt anzuzeigen.

Zusammenfassend lässt sich sagen, dass wir mithilfe von Javascript-Code feststellen können, ob das Bild vorhanden ist, und das Standardbild anzeigen können, wenn das Bild nicht vorhanden ist. Dies kann das Benutzererlebnis verbessern und Fehlersituationen reduzieren, die durch Fehler beim Laden von Bildern verursacht werden.

Das obige ist der detaillierte Inhalt vonVerwenden Sie Javascript, um festzustellen, ob das Bild vorhanden ist. Wenn es nicht vorhanden ist, zeigen Sie den Code des Standardbilds an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!