使用ngFor时的角4风格背景图像

esl*_*oud 17 javascript css json angular

我有背景图片网址的问题.我有阵列有图像网址我怎么能在背景图片网址中使用它

<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>
Run Code Online (Sandbox Code Playgroud)

Hit*_*nds 47

参考这一个Angular2动态背景图像

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

// style.backgroundImage
[style.backgroundImage]="'url('+ course.imageUrl +')'"
Run Code Online (Sandbox Code Playgroud)


esl*_*oud 8

谢谢你的答案,正确的代码是

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


Pan*_*kar 7

你应该使用background而不是backgroundColor

[style.background]="'url('+course.imageUrl+')'"
Run Code Online (Sandbox Code Playgroud)