Maison > interface Web > tutoriel CSS > le corps du texte

Comment définir des images d'arrière-plan dans AngularJS sans erreurs ?

Mary-Kate Olsen
Libérer: 2024-11-05 07:44:02
original
581 Les gens l'ont consulté

How to Set Background Images in AngularJS without Errors?

Alternative AngularJS pour définir l'arrière-plan de l'image à l'aide de ng-style

AngularJS fournit la directive ng-src pour éviter les erreurs liées aux URL d'image non valides avant rendu des composants. Cependant, il manque une solution similaire pour les images d’arrière-plan. Par conséquent, des erreurs se produisent lorsque les URL des images d’arrière-plan contiennent des variables dynamiques dans les applications AngularJS. Ce problème survient car le navigateur suppose des URL d'image non valides.

Solution : utiliser ng-style pour définir l'image d'arrière-plan

Pour résoudre ce problème, une solution conviviale angulaire consiste à utiliser la directive de style ng. Cette directive permet de définir dynamiquement des styles CSS en fonction de valeurs variables. L'extrait de code suivant montre comment utiliser ng-style pour définir une image d'arrière-plan :

<code class="html"><li ng-style="{'background-image':'url(/static/'+imgURL+')'}" ng-repeat="imgURL in imageList">... </li></code>
Copier après la connexion

Dans cet exemple, une liste d'URL d'images est stockée dans imageList. La directive ng-style est appliquée à chaque élément li, définissant l'image d'arrière-plan à l'aide de la variable imgURL. La fonction url() est utilisée dans l'objet style pour spécifier la source de l'image.

En incorporant le style ng, cette solution résout efficacement le problème des erreurs causées par des URL d'image d'arrière-plan non valides, car vous pouvez définir dynamiquement la URL d'images à l'aide d'expressions AngularJS. Il s'agit d'une approche propre et efficace par rapport à l'utilisation d'attributs de style en ligne.

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal