web-dev-qa-db-ja.com

angular ngFor使用時の4スタイルの背景画像

背景画像のURLに問題があります。私は配列に画像の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>
javascriptcssjsonangular
15
eslam masoud

これを参照してください Angular2 dynamic background images

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

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

答えてくれてありがとう、正しいコードは

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

backgroundの代わりにbackgroundColorを使用する必要があります

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

単一の変数にURLパスを追加することでそれを行うことができます。例えば

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

そして

second way

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