用javascript判断图片是否存在_不存在则显示默认图片的代码

在网站或应用中，有时候我们需要显示一张图片，但不确定该图片是否存在或者在服务器上是否被删除。这时候，如果直接显示该图片，可能会出现错误的情况。为了解决这个问题，我们可以使用Javascript代码来判断图片是否存在，在图片不存在的情况下，显示一张默认图片。本文将介绍如何使用Javascript来实现该功能。

首先，我们需要先将要显示的图片包裹在一个div或img标签中，并且在该标签中设置一个自定义的属性src-real，用来存储图片的真实路径。代码如下：

接下来，我们可以使用Javascript来判断图片是否存在。使用Image对象的onload和onerror事件，可以在图片加载完成或加载失败时触发相应的事件处理函数。我们可以在加载完成事件onload中设置图片的src属性为真实路径src-real，以此来显示图片；在加载失败事件onerror中设置图片的src属性为默认图片的路径，如下所示：

// 获取所有要判断的图片节点 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') })

在上述代码中，我们首先通过querySelectorAll方法获取所有要判断的图片节点，并且循环遍历每个图片节点。然后，我们创建了一个新的Image对象，并设置了其onload和onerror事件处理函数。当图片加载完成时，onload事件被触发，我们可以通过getAttribute方法获取图片的真实路径src-real，并将该路径赋值给图片节点的src属性，以此来显示实际图片；当图片加载失败时，onerror事件被触发，我们可以将图片节点的src属性设置为默认图片的路径，从而显示默认图片。

最后，我们需要在CSS中设置默认图片的样式，这样当图片加载失败时，可以显示正确的默认图片。代码如下：

.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; }

在上述代码中，我们首先设置图片的宽度、高度以及背景色。然后，我们通过CSS属性选择器[src*="default"]来选择所有src属性中包含"default"的图片节点，然后设置该图片节点的背景图片为默认图片的路径，以此来达到显示默认图片的效果。

综上所述，我们可以通过Javascript代码来判断图片是否存在，并在图片不存在时，显示默认图片。这样可以增强用户的体验，并减少因图片加载失败导致的错误情况。

Atas ialah kandungan terperinci 用javascript判断图片是否存在_不存在则显示默认图片的代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!