Bagaimana cara menambahkan gambar latar belakang menggunakan ngStyle (angular2)?

Bagaimana cara menggunakan ngStyle untuk menambahkan gambar latar belakang? Kode saya tidak berfungsi:

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

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

Saya pikir Anda bisa mencoba ini:

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

Dari membaca ngStyleekspresi Anda , saya rasa Anda melewatkan beberapa "'" ...

Anda juga dapat mencoba ini:

[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>

Lihat juga

• https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html
• Di RC.1 beberapa gaya tidak dapat ditambahkan menggunakan sintaksis binding
• Contoh Plunker

Sepertinya gaya Anda telah dibersihkan, untuk melewatinya coba gunakan metode bypassSecurityTrustStyle dari DomSanitizer.

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>

Gunakan sebagai gantinya

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

Gambar latar belakang saya tidak berfungsi karena URL memiliki spasi di dalamnya dan karena itu saya perlu menyandikannya ke URL.

Anda dapat memeriksa apakah ini masalah yang Anda alami dengan mencoba URL gambar lain yang tidak memiliki karakter yang perlu keluar.

Anda bisa melakukan ini ke data dalam komponen hanya menggunakan Javascripts built in encodeURI () metode.

Secara pribadi saya ingin membuat pipa untuk itu sehingga bisa digunakan dalam template.

Untuk melakukan ini, Anda dapat membuat pipa yang sangat sederhana. Sebagai contoh:

src / app / pipe / 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>

Anda dapat menggunakan 2 metode:

Metode 1

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

Metode 2

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

Catatan: penting untuk mengapit URL dengan " char.

Sebagian besar gambar tidak ditampilkan karena URL Anda berisi spasi. Dalam kasus Anda, Anda hampir melakukan semuanya dengan benar. Kecuali satu hal - Anda belum menambahkan tanda kutip tunggal seperti yang Anda lakukan jika Anda menentukan gambar latar belakang di css Ie

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

Untuk melakukannya, lepas karakter kutipan dalam HTML melalui \ '

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

Solusi saya, menggunakan pernyataan if..else. Itu selalu merupakan praktik yang baik jika Anda ingin menghindari frustrasi yang tidak perlu, untuk memeriksa apakah variabel Anda ada dan disetel. Jika tidak, berikan gambar cadangan jika; Anda juga dapat menentukan beberapa properti gaya, seperti background-position: center, dll.

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