角4式背景图像使用ngFor

问题描述：

当我与背景图像的URL问题。我有数组有图片的URL我怎么可以用它在背景图片的URL角4式背景图像使用ngFor

<div class="col-lg-3 col-md-3 col-sm-6" *ngFor="let course of courses"><a> 
    </a><div class="box"><a> 
     <div class="box-gray aligncenter" [style.backgroundColor]="course.imageUrl" > 
     </div> 
     </a><div class="box-bottom"><a > 
      </a><a >{{course.name}}</a> 
     </div> 
    </div> 
</div>

你试过吗？ '[ngStyle] = “{ '背景图像'： 'URL（' + course.imageUrl + '）'}”' – Ishnark

Ishnark具有正确的答案 –

感谢，它的工作 –

答

您可以使用使用[src]标签ngFor对象建立组件上的网址。

<div class="col-lg-3 col-md-3 col-sm-6" *ngFor="let course of courses"><a> 
    </a><div class="box"><a> 
     <div class="box-gray aligncenter" > 
      <img [src]="course.imageUrl" /> 
     </div> 
     </a><div class="box-bottom"><a > 
      </a><a >{{course.name}}</a> 
     </div> 
    </div> 
</div>

它的工作，但CSS已毁 –

答

您应该使用background代替backgroundColor

[style.background]="'url('+course.imageUrl+')'"

答

参考这个Angular2 dynamic background images

// inappropriate style.backgroundColor 
[style.backgroundColor]="course.imageUrl" 

// style.backgroundImage 
[style.backgroundImage]="'url('+ course.imageUrl +')'"

答

谢谢您的回答，正确的代码是

[ngStyle]="{'background-image':'url(' + course.imageUrl + ')'}">

角4式背景图像使用ngFor

相关推荐