使用 ngFor 時的 angular 4 風格背景圖像

Question

我的背景圖片網址有問題。 我有數組有圖像 url 我如何在背景圖像 url 中使用它

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

Answer 1

參考這一個Angular2動態背景圖像

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

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

Answer 2

謝謝你的答案，正確的代碼是

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

Answer 3

您應該使用background而不是backgroundColor

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

Answer 4

你可以通過在單個變量中添加url路徑來實現。 例如

bgImageVariable="www.domain.com/path/img.jpg";

和

second way

 [ngStyle]="{'background-image': 'url(' + bgImageVariable + ')'}" 

Answer 5

<img  [src]="item.imgUrl" (error)="pictNotLoading($event)" alt="" />

pictNotLoading(event) { 
    event.target.src = '/assets/dynamic_images/medvibe_partner.png'; 
} 

上述標准將替換損壞的圖像。 在我的產品列表頁面中，我決定為每個產品項目動態設置background-image （就像懸停效果一樣）。

<span class="product_thumbnail_hover" style="background-image:url('{{item.imgUrl}}');"></span>

但不知何故，我從 api 調用中得到了一堆損壞的圖像 URL。 所以，我的問題是如何替換 style background-image 中給出的損壞的圖像 url