Utilisation de ng-style pour spécifier l'image d'arrière-plan dans AngularJS
Dans AngularJS, la directive ng-src est couramment utilisée pour définir dynamiquement la source d'un élément d'image tout en évitant les erreurs d'image brisée. Cependant, lorsqu'il s'agit de définir des images d'arrière-plan, l'utilisation de ng-style fournit une solution plus élégante.
Comme expliqué dans la question d'origine, l'attribution directe d'images d'arrière-plan à l'aide de la syntaxe CSS peut entraîner des messages d'erreur si l'URL contient des images dynamiques. variables évaluées par AngularJS. Une solution possible consiste à concaténer manuellement l'URL entre doubles accolades, mais cela peut être fastidieux et illisible.
Pour relever ce défi, la directive ng-style peut être utilisée pour définir dynamiquement la propriété background-image. Par exemple, l'extrait de code suivant définit l'image d'arrière-plan d'un élément d'élément de liste (li) sur une URL composée de l'URL de base et de la valeur de la variable imgURL :
<code class="html"><li ng-style="{'background-image':'url(/static/'+imgURL+')'}"">...<li></code>
Cette approche présente plusieurs avantages :
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!