Question

我正在尝试为ngFor循环中的每个div设置背景图像。在我循环的JSON中，我有一个属性property.Image，它将一个url字符串保存到图像中。 <img src={{flag.properties.Image}}/>有效，但我尝试将图像显示为背景图像则不然。在浏览器Inspector中，div background-image显示为{{flag.properties.Image}}，而不是读取我想要指向的url。我究竟做错了什么？

<h3>Top Flags</h3>
<div class="grid grid-pad">
  <div *ngFor="let flag of flags" (click)="gotoDetail(flag)" class="col-1-4">
    <div class="module flag" style="background-image: url({{flag.properties.Image}})">
      <h4>{{flag.id}}</h4>
      <div><img src={{flag.properties.Image}} height="50px" /></div>
      <div>{{flag.properties.Adaptation}}</div>
    </div>
  </div>
</div>

Answer 1

改为使用

[style.background-image]="'url('+flag.properties.Image+')'"

另见In RC.1 some styles can't be added using binding syntax

使用ngFor的内联样式背景图像

1 个答案: