Wie füge ich background-image mit ngStyle (angular2) hinzu?

Wie benutzt man ngStyle, um ein Hintergrundbild hinzuzufügen? Mein Code funktioniert nicht:Wie füge ich background-image mit ngStyle (angular2) hinzu?

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

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

Quelle

2016-01-19 Ignat

warum verwenden Sie die Klammern auf ngstyle Attribut? – gal

Siehe auch http://stackoverflow.com/questions/37076867/in-rc-1-some-styles-cant-be-added-using-binding-syntax über ein ähnliches Problem in RC.1 –

110

ich glaube, Sie versuchen, diese könnten:

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

Aus der Lektüre Ihrer ngStyle Ausdruck, ich denke, dass Sie einige "'" verpasst ...

Quelle

2016-01-19 11:22:19

Getestet. Arbeiten mit RC.1. Es sollte nicht für RC.2 und neuere Releases nach dem, was sie sagen [hier] benötigt werden (http://stackoverflow.com/questions/37076867/in-rc-1-some-styles-cant-be-added- using-binding-syntax) –

Danke .. Es hat funktioniert –

Vielen Dank, es hat funktioniert – Mamadou

Sie können auch versuchen, diese:

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

Quelle

2016-06-02 12:34:27

Ich frage mich, was die Vor-/Nachteile der Verwendung von vs NgStyle ist? – redfox05

@ redfox05 Ich nehme an, ngStyle ist ein syntaktischer Zucker. Der Hauptunterschied besteht darin, dass Sie mit ngStyle mehrere CSS-Regeln anwenden können, aber [Stil. ] erlaubt nur eins. Die nächsten sind äquivalent: ''

First

und ''

Second

–

Ich habe diese [style.css] Ansatz verwendet, obwohl ich nicht [style.background-Wiederholung] bekommen zu arbeiten, wissen Sie warum? –

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

Quelle

2017-03-28 12:51:33

Sieht aus wie Ihr Stil hygienisiert wurde, um durch Übergeben Sie es mit der Methode "bypassSecurityTrustStyle" 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>

Quelle

2017-10-02 15:24:39

Use Instead 

[ngStyle]="{background:' url(assets/img/' + youtube[0].image + ')'}"

Quelle

2018-01-04 06:50:35

Wie füge ich background-image mit ngStyle (angular2) hinzu?

Antwort

Verwandte Themen