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

前端 未结 9 2144
青春惊慌失措
青春惊慌失措 2020-11-28 05:36

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

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


        
相关标签:
9条回答
  • 2020-11-28 05:45
    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 can't be added using binding syntax
    • Plunker example
    0 讨论(0)
  • 2020-11-28 05:45

    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 \'

                                              \/                                  \/
    <div [ngStyle]="{'background-image': 'url(\''+ item.color.catalogImageLink + '\')'}"></div>
    
    0 讨论(0)
  • 2020-11-28 05:50

    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';
    
    @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>

    0 讨论(0)
  • 2020-11-28 05:51

    Use Instead

    [ngStyle]="{'background-image':' url(' + instagram?.image + ')'}"
    
    0 讨论(0)
  • 2020-11-28 05:54

    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: '<router-outlet></router-outlet>'
    })
    export class AppComponent {
      myUrlVariable: string;
      constructor() {
        this.myUrlVariable = 'http://myimagewith space init.com';
      }
    }
    

    src/app/app.component.html

    <div [style.background-image]="'url(' + (myUrlVariable | encodeUri) + ')'" ></div>
    
    0 讨论(0)
  • 2020-11-28 05:58

    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.

    0 讨论(0)
提交回复
热议问题