Angular 4 стиль фона при использовании ngFor

Ответ 1

Обратитесь к этому Angular2 динамическим фоновым изображениям

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

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

Ответ 2

Вы должны использовать background вместо backgroundColor

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

Ответ 3

Благодарю вас за ответы, правильный код

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

Ответ 4

Вы можете сделать это, добавив URL-адрес в одну переменную. например

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

а также

second way

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

Ответ 5

вы можете создать URL-адрес компонента, используя объект ngFor, используя тег [src].

<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"  >
           <img [src]="course.imageUrl" />
        </div>
        </a><div class="box-bottom"><a >
            </a><a >{{course.name}}</a>
        </div>
    </div>
</div>

Ответ 6

Мое фоновое изображение не работало, потому что в URL был пробел, и поэтому мне нужно было его кодировать.

Вы можете проверить, является ли это вашей проблемой, попробовав другой URL-адрес изображения, в котором нет символов, которые нужно экранировать.

Вы можете сделать это с данными в компоненте, просто используя Javascripts, встроенный в метод encodeURI().

Лично я хотел создать для него канал, чтобы его можно было использовать в шаблоне.

Для этого вы можете создать очень простую трубу. Например:

ЦСИ/приложение/трубы/закодировать-uri.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'encodeUri'
})
export class EncodeUriPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return encodeURI(value);
  }
}

SRC/приложение /app.module.ts

import { EncodeUriPipe } from './pipes/encode-uri.pipe';
...

@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule
    ...
  ],
  exports: [
    ...
  ],
 declarations: [
    AppComponent,
    EncodeUriPipe
 ],
 bootstrap: [ AppComponent ]
})

export class AppModule { }

SRC/приложение /app.component.ts

import {Component} from '@angular/core';

@Component({
  // tslint:disable-next-line
  selector: 'body',
  template: '<router-outlet></router-outlet>'
})
export class AppComponent {
  myUrlVariable: string;
  constructor() {
    this.myUrlVariable = 'http://myimagewith space init.com';
  }
}

ЦСИ/приложение /app.component.html

<div [style.background]="'url(' + (myUrlVariable | encodeUri) + ')'" ></div>