Maison > interface Web > tutoriel CSS > Comment définir dynamiquement des images d'arrière-plan dans AngularJS avec le style ng ?

Comment définir dynamiquement des images d'arrière-plan dans AngularJS avec le style ng ?

DDD
Libérer: 2024-11-05 10:49:02
original
696 Les gens l'ont consulté

How to Dynamically Set Background Images in AngularJS with ng-style?

AngularJS : équivalent ng-src pour l'URL de l'image d'arrière-plan CSS

Dans AngularJS, l'utilisation de l'attribut ng-src garantit une image sans erreur rendu en résolvant les références de variables dans l'URL. Cependant, lorsque des images d'arrière-plan sont appliquées à des éléments DIV à l'aide de la syntaxe background-image: url(...), des problèmes similaires surviennent en raison de l'inclusion de variables dynamiques et de l'affichage prématuré d'erreurs du navigateur.

La résolution de ce problème nécessite une approche plus approche raffinée plutôt que de simplement envelopper l'ensemble du style de l'image d'arrière-plan entre doubles accolades. Au lieu de cela, une méthode directe a été identifiée : utiliser la directive ng-style en conjonction avec des expressions JavaScript.

En encapsulant la propriété background-image entre accolades et en la préfixant avec 'url(' et ')', suivie de la concaténation de /static/ et de la variable imgURL (ou de toute variable personnalisée), la liaison dynamique nécessaire est obtenue. Cette solution basée sur JavaScript résout avec précision les références de variables, évitant ainsi le déclenchement d'erreurs prématurées et conservant une base de code plus propre.

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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal