How to add a background image using ngStyle (angular2)?

Question

How to use ngStyle to add a background image? My code does not work:

this.photo = 'http://dl27.fotosklad.org.ua/20121020/6d0d7b1596285466e8bb06114a88c903.jpg'; <div [ngStyle]="{'background-image': url(' + photo + ')}"></div> 

Answer 1

I think you could try this:

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

From reading your ngStyle expression, I assume you missed some "" ...

Answer 2

You can also try the following:

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

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

see also

• https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html
• In RC.1, some styles cannot be added using binding syntax
• Plunger example

Answer 4

It looks like your style has been sanitized to get around it, try using the bypassSecurityTrustStyle method from 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> 

Answer 5

Use instead

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

Answer 6

My background image didn’t work because there was a space in the URL and therefore I needed to encode it.

You can check if this is your problem by trying a different image url that doesn't have characters to be escaped.

You can do this with the data in the component simply by using Javascripts built into the encodeURI () method.

Personally, I wanted to create a channel for it so that it could be used in the template.

For this you can create a very simple pipe. For example:

SIC / application / pipes / code-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'; } } 

SIC / application /app.component.html

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