Maison  >  Article  >  interface Web  >  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
DDDoriginal
2024-11-05 10:49:02651parcourir

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!

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