使用 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 样式背景图像的主要内容,如果未能解决你的问题,请参考以下文章

在图像标签上使用角度 ng-style 来调出背景图像

具有内插值的 ng 样式不呈现背景图像?

角度动态背景图片

角度6背景图像交叉淡入淡出动画

UIButton 系统样式选中状态,保留图片和背景

如何设置角度为4或5的组件背景颜色?