Comment gérer les erreurs de chargement d'image avec l'attribut onerror dans tous les navigateurs ?

Gérer les erreurs de chargement des images avec l'attribut onerror

L'intégration d'images dans des applications Web nécessite souvent de gérer les échecs de chargement potentiels. L'attribut onerror fournit une solution pratique pour gérer efficacement de telles erreurs.

Arrière-plan

Comme décrit dans le code HTML donné, l'attribut onerror définit un écouteur d'événements qui exécute un script lorsque le processus de chargement d'une image rencontre une erreur. Cependant, comme mentionné dans la requête, cette approche peut échouer dans certains navigateurs tels que Chrome et Mozilla.

Solution

Pour garantir la compatibilité entre les navigateurs, envisagez d'utiliser ce qui suit syntaxe :

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

Ce code fournit une image de secours alternative si l'image principale ne parvient pas à se charger. Pour éviter une boucle infinie si l'URL de sauvegarde est également invalide, le code annule le gestionnaire d'erreurs en utilisant "this.onerror=null;".

Démonstration en direct

Une une démonstration interactive de cette solution est disponible sur le lien suivant :

• http://jsfiddle.net/oLqfxjoz/

Considérations supplémentaires

Comme indiqué dans la solution, l'utilisation de cette approche garantit la compatibilité dans Chrome et Mozilla. Cependant, il est important de noter que la gestion des erreurs de chargement d'image peut varier selon les différents environnements de navigateur.

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!