Как добавить фоновое изображение с помощью ngStyle (angular2)?

Ответ 1

Я думаю, вы могли бы попробовать это:

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

Из чтения вашего выражения ngStyle, я предполагаю, что вы пропустили какой-то ""...

Ответ 2

Также вы можете попробовать следующее:

[style.background-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>

См. также

• https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html
• В RC.1 некоторые стили не могут быть добавлены с использованием синтаксиса привязки
• Пример плунжера

Ответ 4

Похоже, что ваш стиль был дезинфицирован, чтобы обойти его, попробуйте использовать метод bypassSecurityTrustStyle из 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>

Ответ 5

Используйте вместо

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

Ответ 6

Мое фоновое изображение не работало, потому что в URL был пробел, и поэтому мне нужно было его кодировать.

Вы можете проверить, является ли это вашей проблемой, попробовав другой URL-адрес изображения, в котором нет символов, которые нужно экранировать.

Вы можете сделать это с данными в компоненте, просто используя Javascripts, встроенный в метод encodeURI().

Лично я хотел создать для него канал, чтобы его можно было использовать в шаблоне.

Для этого вы можете создать очень простую трубу. Например:

ЦСИ/приложение/трубы/закодировать-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.module.ts

import { EncodeUriPipe } from './pipes/encode-uri.pipe';
...

@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule
    ...
  ],
  exports: [
    ...
  ],
 declarations: [
    AppComponent,
    EncodeUriPipe
 ],
 bootstrap: [ AppComponent ]
})

export class AppModule { }

SRC/приложение /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';
  }
}

ЦСИ/приложение /app.component.html

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