How to add background-image using ngStyle angular2

Question

How to use ngStyle to add background-image  My code doesn t work   this photo    http   dl27 fotosklad org ua 20121020 6d0d7b1596285466e8bb06114a88c903 jpg     lt div  ngStyle     background-image   url     photo        gt  lt  div gt

User · Answer

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

_x000D_

import { Component, OnInit, Input } from '@angular/core';_x000D_
import { DomSanitizer, SafeStyle } from '@angular/platform-browser';_x000D_
_x000D_
@Component({_x000D_
  selector: 'my-component',_x000D_
  templateUrl: './my-component.component.html',_x000D_
  styleUrls: ['./my-component.component.scss']_x000D_
})_x000D_
_x000D_
export class MyComponent implements OnInit {_x000D_
_x000D_
  public backgroundImg: SafeStyle;_x000D_
  @Input() myObject: any;_x000D_
_x000D_
  constructor(private sanitizer: DomSanitizer) {}_x000D_
_x000D_
  ngOnInit() {_x000D_
     this.backgroundImg = this.sanitizer.bypassSecurityTrustStyle('url(' + this.myObject.ImageUrl + ')');_x000D_
  }_x000D_
_x000D_
}

_x000D_

<div *ngIf="backgroundImg.length > 0" [style.background-image]="backgroundImg"></div>

_x000D_

User · Answer

Mostly the image is not displayed because you URL contains spaces   In your case you almost did everything correct  Except one thing - you have not added single quotes like you do if you specify background-image in css I e     bg-img                                     background-image  url  http              To do so escape quot character in HTML via                                                                                       lt div  ngStyle     background-image    url      item color catalogImageLink           gt  lt  div gt

User · Answer

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   src app pipes encode-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    lt router-outlet gt  lt  router-outlet gt      export class AppComponent     myUrlVariable  string    constructor         this myUrlVariable    http   myimagewith space init com           src app app component html   lt div  style background-image    url      myUrlVariable   encodeUri          gt  lt  div gt

User · Answer

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              lt div  style background-image   backgroundImg  gt  lt  div gt    See also   https   angular io docs ts latest api platform-browser index DomSanitizer-class html In RC 1 some styles can  39 t be added using binding syntax Plunker example

User · Answer

My solution  using if  else statement  It is always a good practice if you want  to avoid unnecessary frustrations  to check that your variable exists and is set  Otherwise  provide a backup image in case  You can also specify multiple style properties  like background-position  center  etc    x000D   x000D   lt div  ngStyle     background-image   this photo    url     this photo          https   placehold it 70x70    background-position    center     gt  lt  div gt  x000D   x000D   x000D

User · Answer

I think you could try this    lt div  ngStyle     background-image    url     photo         gt  lt  div gt    From reading your ngStyle expression  I guess that you missed some

User · Answer

You can use 2 methods   Method 1   lt div  ngStyle     background-image    url  amp quot     photo     amp quot      gt  lt  div gt    Method 2   lt div  style background-image    url  amp quot     photo     amp quot     gt  lt  div gt    Note  it is important to surround the URL with   char

User · Answer

Use Instead   ngStyle     background-image    url     instagram  image

User · Answer

Also you can try this    style background-image    url     photo

[javascript] How to add background-image using ngStyle (angular2)?

Examples related to javascript

Examples related to html

Examples related to css

Examples related to angular