ngStyle (angular2)을 사용하여 배경 이미지를 추가하는 방법은 무엇입니까?

ngStyle을 사용하여 배경 이미지를 추가하는 방법은 무엇입니까? 내 코드가 작동하지 않습니다.

this.photo = 'http://dl27.fotosklad.org.ua/20121020/6d0d7b1596285466e8bb06114a88c903.jpg';

<div [ngStyle]="{'background-image': url(' + photo + ')}"></div>

나는 당신이 이것을 시도 할 수 있다고 생각합니다.

<div [ngStyle]="{'background-image': 'url(' + photo + ')'}"></div>

ngStyle표현을 읽어 보니 " '"를 놓친 것 같네요 ...

또한 이것을 시도 할 수 있습니다.

[style.background-image]="'url(' + photo + ')'"

import {BrowserModule, DomSanitizer} from '@angular/platform-browser'

  constructor(private sanitizer:DomSanitizer) {
    this.name = 'Angular!'
    this.backgroundImg = sanitizer.bypassSecurityTrustStyle('url(http://www.freephotos.se/images/photos_medium/white-flower-4.jpg)');
  }

<div [style.background-image]="backgroundImg"></div>

또한보십시오

• https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html
• RC.1에서는 바인딩 구문을 사용하여 일부 스타일을 추가 할 수 없습니다.
• 플 런커 예

스타일이 삭제 된 것 같습니다. 우회하려면 DomSanitizer의 bypassSecurityTrustStyle 메서드를 사용해보세요.

import { Component, OnInit, Input } from '@angular/core';
import { DomSanitizer, SafeStyle } from '@angular/platform-browser';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.scss']
})

export class MyComponent implements OnInit {

  public backgroundImg: SafeStyle;
  @Input() myObject: any;

  constructor(private sanitizer: DomSanitizer) {}

  ngOnInit() {
     this.backgroundImg = this.sanitizer.bypassSecurityTrustStyle('url(' + this.myObject.ImageUrl + ')');
  }

}

<div *ngIf="backgroundImg.length > 0" [style.background-image]="backgroundImg"></div>

대신 사용

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

URL에 공백이있어서 배경 이미지가 작동하지 않아 URL 인코딩이 필요했습니다.

이스케이프가 필요한 문자가없는 다른 이미지 URL을 시도하여 문제가 있는지 확인할 수 있습니다.

encodeURI () 메서드에 내장 된 자바 스크립트를 사용하여 구성 요소의 데이터에이를 수행 할 수 있습니다.

개인적으로 템플릿에서 사용할 수 있도록 파이프를 만들고 싶었습니다.

이를 위해 매우 간단한 파이프를 만들 수 있습니다. 예를 들면 :

src / app / pipes / encode-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 / 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 / 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';
  }
}

src / app / app.component.html

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

다음 두 가지 방법을 사용할 수 있습니다.

방법 1

<div [ngStyle]="{'background-image': 'url(&quot;' + photo + '&quot;)'}"></div>

방법 2

<div [style.background-image]="'url(&quot;' + photo + '&quot;)'"></div>

참고 : URL을 " char로 묶는 것이 중요합니다 .

URL에 공백이 포함되어 있기 때문에 대부분 이미지가 표시되지 않습니다. 귀하의 경우 거의 모든 것을 올바르게했습니다. 한 가지를 제외하고-CSS Ie에서 background-image를 지정하는 경우처럼 작은 따옴표를 추가하지 않았습니다.

.bg-img {                \/          \/
    background-image: url('http://...');
}

그렇게하려면 \ '를 통해 HTML에서 따옴표 문자를 이스케이프하십시오.

                                          \/                                  \/
<div [ngStyle]="{'background-image': 'url(\''+ item.color.catalogImageLink + '\')'}"></div>

내 솔루션은 if..else 문을 사용합니다. 불필요한 좌절을 피하고 변수가 존재하고 설정되어 있는지 확인하려면 항상 좋은 방법입니다. 그렇지 않으면 백업 이미지를 제공하십시오. background-position: center등의 여러 스타일 속성을 지정할 수도 있습니다 .

<div [ngStyle]="{'background-image': this.photo ? 'url(' + this.photo + ')' : 'https://placehold.it/70x70', 'background-position': 'center' }"></div>