使用ngFor的内联样式背景图片 [英] Inline style background-image using ngFor

问题描述

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

I am trying to set the background image for each div in an ngFor loop. In the JSON I'm looping over I have a property property.Image that holds a url string to an image. <img src={{flag.properties.Image}}/> works, but my attempt to show the image as a background-image does not. In the browser Inspector the div background-image shows as {{flag.properties.Image}} rather than reading the url that I'm trying to point to. What am I doing wrong?

<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>

推荐答案

改为使用

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

另请参见在RC.1无法使用绑定语法添加某些样式

这篇关于使用ngFor的内联样式背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！