Use javascript to determine whether the image exists_If it does not exist, display the code of the default image

In a website or application, sometimes we need to display an image, but we are not sure whether the image exists or whether it has been deleted on the server. At this time, if the image is displayed directly, errors may occur. In order to solve this problem, we can use Javascript code to determine whether the image exists, and display a default image if the image does not exist. This article will introduce how to use Javascript to implement this function.

First, we need to wrap the image to be displayed in a div or img tag, and set a custom attribute src-real in the tag to store the real path of the image. The code is as follows:

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

Next, we can use Javascript to determine whether the image exists. Using the onload and onerror events of the Image object, the corresponding event processing function can be triggered when the image loading is completed or fails. We can set the src attribute of the image to the real path src-real in the loading completion event onload to display the image; set the src attribute of the image to the path of the default image in the loading failure event onerror, as shown below:

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

In the above code, we first obtain all the image nodes to be judged through the querySelectorAll method, and loop through each image node. Then, we created a new Image object and set its onload and onerror event handlers. When the image is loaded, the onload event is triggered. We can get the real path src-real of the image through the getAttribute method, and assign the path to the src attribute of the image node to display the actual image; when the image fails to load, When the onerror event is triggered, we can set the src attribute of the image node to the path of the default image to display the default image.

Finally, we need to set the style of the default image in CSS so that when the image fails to load, the correct default image can be displayed. The code is as follows:

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

In the above code, we first set the width, height and background color of the image. Then, we use the CSS attribute selector [src*="default"] to select all image nodes that contain "default" in the src attribute, and then set the background image of the image node to the path of the default image, so as to display the default Picture effect.

To sum up, we can use Javascript code to determine whether the image exists, and display the default image when the image does not exist. This can enhance the user experience and reduce error situations caused by image loading failures.

The above is the detailed content of Use javascript to determine whether the image exists_If it does not exist, display the code of the default image. For more information, please follow other related articles on the PHP Chinese website!