2017-06-13 59 views
3

当我与背景图像的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> 
+2

你试过吗? '[ngStyle] = “{ '背景图像': 'URL(' + course.imageUrl + ')'}”' – Ishnark

+0

Ishnark具有正确的答案 –

+0

感谢,它的工作 –

回答

0

您可以使用使用[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> 
+0

它的工作,但CSS已毁 –

2

您应该使用background代替backgroundColor

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

参考这个Angular2 dynamic background images

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

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

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

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