angular 4 style background image when using ngFor

Question

I have problem with background image url. i have array have images url how can I use it in background image 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

Refer to this one Angular2 dynamic background images

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

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

Answer 2

thank you for your answers, the correct code is

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

Answer 3

You should use background instead of backgroundColor

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

Answer 4

you can do it by adding url path in a single variable. for example

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

and

second way

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