javascript – How to add background-image using ngStyle (angular2)?-ThrowExceptions

Exception or error:

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

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

I think you could try this:

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

From reading your ngStyle expression, I guess that you missed some “‘”…


Also you can try this:

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


import {BrowserModule, DomSanitizer} from '@angular/platform-browser'

  constructor(private sanitizer:DomSanitizer) { = 'Angular!'
    this.backgroundImg = sanitizer.bypassSecurityTrustStyle('url(');
<div [style.background-image]="backgroundImg"></div>

See also


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

import { Component, OnInit, Input } from '@angular/core';
import { DomSanitizer, SafeStyle } from '@angular/platform-browser';

  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>


Use Instead

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


My background image wasn’t working because the URL had a space in it and thus I needed to URL encode it.

You can check if this is the issue you’re having by trying a different image URL that doesn’t have characters that need escaping.

You could do this to the data in the component just using Javascripts built in encodeURI() method.

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

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


import { Pipe, PipeTransform } from '@angular/core';

  name: 'encodeUri'
export class EncodeUriPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return encodeURI(value);


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

  imports: [
  exports: [
 declarations: [
 bootstrap: [ AppComponent ]

export class AppModule { }


import {Component} from '@angular/core';

  // tslint:disable-next-line
  selector: 'body',
  template: '<router-outlet></router-outlet>'
export class AppComponent {
  myUrlVariable: string;
  constructor() {
    this.myUrlVariable = 'http://myimagewith space';


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


You can use 2 methods:

Method 1

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

Method 2

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

Note: it is important to surround the URL with char.

Leave a Reply

Your email address will not be published. Required fields are marked *