Angular 2 - 动态设置图片 URL答案

【问题标题】：Angular 2 - Dynamically set image URLAngular 2 - 动态设置图片 URL
【发布时间】：2018-07-23 02:28:04
【问题描述】：

图像路径在 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)"
什么是正确的语法，因为这不起作用？

【问题讨论】：

使用 ng-style 更多关于下面的链接apply-css-style-attribute-dynamically-in-angular-js

标签： html angular image

【解决方案1】：

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

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

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

【讨论】：

【解决方案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>

【讨论】：

如果路径是绝对的，img src 似乎是可行的，我拥有的 item.imagePath 是相对的，因此需要生成 url (background-image:url)。你有其他选择吗？