Wie füge ich ein Hintergrundbild mit ngStyle (angle2) hinzu?

Wie verwende ich ngStyle, um ein Hintergrundbild hinzuzufügen? Mein Code funktioniert nicht:

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

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

Ich denke, Sie könnten dies versuchen:

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

Nach dem Lesen Ihres ngStyleGesichtsausdrucks haben Sie wahrscheinlich ein "'" verpasst ...

Sie können dies auch versuchen:

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

Siehe auch

• https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html
• In RC.1 können einige Stile nicht mithilfe der Bindungssyntax hinzugefügt werden
• Plunker Beispiel

Ihr Stil wurde anscheinend bereinigt. Um ihn zu umgehen, verwenden Sie die bypassSecurityTrustStyle-Methode von 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>

Verwenden Sie stattdessen

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

Mein Hintergrundbild funktionierte nicht, da die URL ein Leerzeichen enthielt und ich sie daher per URL codieren musste.

Sie können überprüfen, ob dies das Problem ist, indem Sie eine andere Bild-URL ausprobieren, die keine Zeichen enthält, die maskiert werden müssen.

Sie können dies mit den Daten in der Komponente tun, indem Sie nur in encodeURI () integrierte Javascripts verwenden. -Methode integrierten verwenden.

Persönlich wollte ich eine Pipe dafür erstellen, damit sie in der Vorlage verwendet werden kann.

Dazu können Sie eine sehr einfache Pipe erstellen. Beispielsweise:

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>

Sie können 2 Methoden verwenden:

Methode 1

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

Methode 2

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

Hinweis: Es ist wichtig, die URL mit " char " zu umgeben .

Meistens wird das Bild nicht angezeigt, da Ihre URL Leerzeichen enthält. In Ihrem Fall haben Sie fast alles richtig gemacht. Abgesehen von einer Sache - Sie haben keine einfachen Anführungszeichen hinzugefügt, wie Sie es tun, wenn Sie das Hintergrundbild in CSS Ie angeben

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

Um dies zu tun, maskieren Sie das Anführungszeichen in HTML über \ '

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

Meine Lösung mit der Anweisung if..else. Es ist immer eine gute Praxis, wenn Sie unnötige Frustrationen vermeiden möchten, um zu überprüfen, ob Ihre Variable vorhanden und festgelegt ist. Andernfalls geben Sie für den Fall ein Backup-Image an. Sie können auch mehrere Stileigenschaften wie background-position: centerusw. angeben .

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