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