Pourquoi mon code de remplacement d'image d'erreur échoue-t-il dans Chrome et Mozilla ?

Utilisation de l'attribut onerror pour les images

L'attribut onerror spécifie une action à entreprendre lorsqu'une image ne peut pas être chargée. Dans ce cas, vous avez fourni du code pour modifier l'attribut src et remplacer l'image défectueuse par celle par défaut.

Cependant, vous avez rencontré un problème avec ce code qui ne fonctionnait pas dans Chrome et Mozilla, bien qu'il fonctionne dans IE.

La réponse réside dans le fait que les navigateurs modernes déclenchent l'événement d'erreur plusieurs fois si l'URL de sauvegarde fournie dans le gestionnaire d'erreur est également invalide. Cela conduit à une boucle infinie, car l'événement est déclenché à plusieurs reprises et l'attribut src continue d'être modifié.

Pour résoudre ce problème, vous pouvez modifier votre code comme suit :

<img src="invalid_link" onerror="this.onerror=null;this.src='https://placeimg.com/200/300/animals';">

Par en définissant this.onerror=null, vous empêchez que l'événement d'erreur soit à nouveau déclenché. Ceci, à son tour, garantit que l'image ne sera pas remplacée à l'infini.

Vous pouvez également vous référer à la démo en direct sur http://jsfiddle.net/oLqfxjoz/ pour visualiser la mise en œuvre.

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!