Question

图像路径在item.imagePath中定义。

<div *ngFor="let item of itemList">
   <div style="background-image: url(item.imagePath)" class="thumb">
       <span>{{item.productName}}</span>
   </div>
   <div>
       <p>{{item.productFeature}}</p>
   </div>
</div>

style="background-image: url(item.imagePath)"
正确的语法是什么，因为它不起作用？

Answer 1

样式会根据表达式求值的值进行更新：

键是带有可选的样式名称。后缀（即“ top.px”，“ font-style.em”），值是分配给这些属性的值（以给定的单位表示）。

<div [ngStyle]="{'background-image': 'url(' + photo + ')'}"></div>

Answer 2

尝试一下

 <div *ngFor="let item of itemList">
       <div class="thumb">
           <img src="{{item.imagePath}}" />
           <span>{{item.productName}}</span>
       </div>
       <div>
           <p>{{item.productFeature}}</p>
       </div>
    </div>

Angular 2-动态设置图片网址

2 个答案: