Comment éviter les erreurs d'image d'arrière-plan causées par des URL invalides dans 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!