我有以下HTML代码:
<li>
<div class="w3l_banner_nav_right_banner1" style="background:url('./assets/images/2.jpg') no-repeat 0px 0px;">
<h3>Make your <span>food</span> with Spicy.</h3>
<div class="more">
<a href="products.html" class="button--saqui button--round-l button--text-thick" data-text="Shop now">Shop now</a>
</div>
</div>
</li>
问题:
我想用动态变量 {{ article.uri }}
替换图片的URL地址 /assets/images/2.jpg
。
我尝试了下面参考文献中的几种方法:
Attribute property binding for background-image url in Angular 2
How to add background-image using ngStyle (angular2)?
迄今为止尝试过的:
<li *ngFor="let article of arr;let i=index;">
<div *ngIf="i == 0" class="w3l_banner_nav_right_banner" [ngStyle]="{ 'background-url': 'url('+article.uri+')'} no-repeat 0px 0px;">
<h3>Make your <span>food</span> with Spicy.</h3>
<div class="more">
<a href="products.html" class="button--saqui button--round-l button--text-thick" data-text="Shop now">Shop now1</a>
</div>
</div>
</li>
我正在使用Angular 4.1.3。