使用 ngFor 时的角度 4 样式背景图像答案

【问题标题】：angular 4 style background image when using ngFor使用 ngFor 时的角度 4 样式背景图像
【发布时间】：2017-11-15 12:55:32
【问题描述】：

我的背景图片网址有问题。我有数组有图像 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>

【问题讨论】：

你试过了吗？ [ngStyle]="{'background-image': 'url(' + course.imageUrl + ')'}"
伊什纳克有正确答案

标签： javascript css json angular

【解决方案1】：

参考这个Angular2 dynamic background images

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

您应该使用background 而不是backgroundColor

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

【讨论】：

很好，我不知道为什么，但如果我使用 style.backgroundImage 我不会在第一次值更改后更新，但 background 它工作正常，只要有首先清理网址

【解决方案4】：

您可以通过在单个变量中添加 url 路径来实现。例如

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

和

second way

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

【讨论】：