Maison  >  Article  >  interface Web  >  Comment éviter les erreurs d'image d'arrière-plan causées par des URL invalides dans AngularJS ?

Comment éviter les erreurs d'image d'arrière-plan causées par des URL invalides dans AngularJS ?

DDD
DDDoriginal
2024-11-05 04:38:01624parcourir

How to Prevent Background Image Errors Caused by Invalid URLs in AngularJS?

Erreurs d'image d'arrière-plan avec des URL non valides dans AngularJS

Dans AngularJS, la balise ng-src garantit que les URL avec des variables dynamiques ne provoquent pas d'erreurs avant qu'Angular ne les évalue. Cependant, une erreur similaire se produit souvent lors de la définition des images d'arrière-plan à l'aide de background-image:url(...).

Cela se produit car Angular n'évalue pas les variables dans les styles CSS. Par conséquent, lorsque vous utilisez des URL dynamiques pour les images d'arrière-plan, vous pouvez rencontrer un grand nombre d'erreurs, surtout si vous avez plusieurs DIV avec cette configuration.

Solution : liaison de style angulaire

Pour résoudre ce problème , vous pouvez utiliser la fonctionnalité de liaison de style d'Angular :

<li ng-style="{'background-image':'url(/static/'+imgURL+')'}">...</li>

En enveloppant l'URL dynamique entre accolades dans la liaison de style angulaire, Angular garantit que l'URL est mise à jour une fois les variables évaluées, résolvant ainsi l'erreur et empêchant demandes d'images cassées.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn