Utilisez javascript pour déterminer si l'image existe_Si elle n'existe pas, affichez le code de l'image par défaut

Dans les sites Web ou les applications, nous avons parfois besoin d'afficher une image, mais nous ne savons pas si l'image existe ou si elle a été supprimée sur le serveur. À ce stade, si l'image est affichée directement, des erreurs peuvent survenir. Afin de résoudre ce problème, nous pouvons utiliser du code Javascript pour déterminer si l'image existe, et afficher une image par défaut si l'image n'existe pas. Cet article expliquera comment utiliser Javascript pour implémenter cette fonction.

Tout d'abord, nous devons envelopper l'image à afficher dans une balise div ou img, et définir un attribut personnalisé src-real dans la balise pour stocker le chemin réel de l'image. Le code est le suivant :

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

Ensuite, nous pouvons utiliser Javascript pour déterminer si l'image existe. À l'aide des événements onload et onerror de l'objet Image, la fonction de traitement d'événement correspondante peut être déclenchée lorsque le chargement de l'image est terminé ou échoue. Nous pouvons définir l'attribut src de l'image sur le chemin réel src-real dans l'événement d'achèvement du chargement onload pour afficher l'image ; définir l'attribut src de l'image sur le chemin de l'image par défaut dans l'événement d'échec de chargement onerror, comme indiqué. ci-dessous :

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

Dans le code ci-dessus, nous obtenons d'abord tous les nœuds d'image à juger via la méthode querySelectorAll, et parcourons chaque nœud d'image. Ensuite, nous avons créé un nouvel objet Image et défini ses gestionnaires d'événements onload et onerror. Lorsque l'image est chargée, l'événement onload est déclenché. Nous pouvons obtenir le chemin réel src-real de l'image via la méthode getAttribute et attribuer le chemin à l'attribut src du nœud d'image pour afficher l'image réelle ; ne parvient pas à se charger, lorsque l'événement onerror est déclenché, nous pouvons définir l'attribut src du nœud d'image sur le chemin de l'image par défaut pour afficher l'image par défaut.

Enfin, nous devons définir le style de l'image par défaut en CSS afin que lorsque l'image ne se charge pas, l'image par défaut correcte puisse être affichée. Le code est le suivant :

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

Dans le code ci-dessus, nous définissons d'abord la largeur, la hauteur et la couleur d'arrière-plan de l'image. Ensuite, nous utilisons le sélecteur d'attribut CSS [src*="default"] pour sélectionner tous les nœuds d'image qui contiennent "default" dans l'attribut src, puis définissons l'image d'arrière-plan du nœud d'image sur le chemin de l'image par défaut, donc pour afficher l'effet d'image par défaut.

Pour résumer, on peut utiliser du code Javascript pour déterminer si l'image existe, et afficher l'image par défaut lorsque l'image n'existe pas. Cela peut améliorer l'expérience utilisateur et réduire les situations d'erreur causées par les échecs de chargement des images.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!