如何使用ngStyle (angular2)添加背景图像?

How to use ngStyle to add background-image? My code doesn't work:

如何使用ngStyle添加背景图像?我的代码不工作:

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

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

5 个解决方案

#1

126

I think you could try this:

我想你可以试试这个:

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

From reading your ngStyle expression, I guess that you missed some "'"...

通过阅读你的ngStyle表达，我猜你漏掉了一些“'”……

#2

Also you can try this:

你也可以试试这个:

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

(风格。backearth -image]="'url ' (' + photo + ') "

#3

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>

#4

Looks like your style has been sanitized, to bypass it try using bypassSecurityTrustStyle method from DomSanitizer.

看起来您的风格已经被净化了，绕过它尝试使用来自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>

#5

Use Instead

而不是使用

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

#1

126