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

來源

2017-06-13 eslam masoud

你試過嗎？ '[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>

來源

2017-06-13 16:16:39

它的工作，但CSS已毀 –

您應該使用background代替backgroundColor

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

來源

2017-06-13 16:24:27

參考這個Angular2 dynamic background images

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

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

來源

2017-06-13 16:25:22 Hitmands

-3

謝謝您的回答，正確的代碼是

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

來源

2017-06-14 08:06:18

角4式背景圖像使用ngFor

回答

相關問題