使用 ngFor 时的角度 4 样式背景图像
Posted
技术标签:
【中文标题】使用 ngFor 时的角度 4 样式背景图像【英文标题】:angular 4 style background image when using ngFor 【发布时间】: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 + ')'"
伊什纳克有正确答案
【参考方案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 + ')'"
【讨论】:
以上是关于使用 ngFor 时的角度 4 样式背景图像的主要内容,如果未能解决你的问题,请参考以下文章