วิธีเพิ่มภาพพื้นหลังโดยใช้ ngStyle (angular2)

จะใช้ ngStyle เพื่อเพิ่มภาพพื้นหลังได้อย่างไร? รหัสของฉันใช้ไม่ได้:

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

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

ฉันคิดว่าคุณสามารถลองสิ่งนี้:

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

จากการอ่านngStyleสำนวนของคุณฉันเดาว่าคุณพลาด "'" ...

นอกจากนี้คุณสามารถลองสิ่งนี้:

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

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 ไม่สามารถเพิ่มสไตล์บางอย่างโดยใช้ไวยากรณ์การผูก
• ตัวอย่าง Plunker

ดูเหมือนว่าสไตล์ของคุณได้รับการทำความสะอาดแล้วหากต้องการหลีกเลี่ยงให้ลองใช้วิธี 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>

ใช้แทน

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

ภาพพื้นหลังของฉันไม่ทำงานเนื่องจาก URL มีช่องว่างอยู่ดังนั้นฉันจึงต้องเข้ารหัส URL

คุณสามารถตรวจสอบว่านี่คือปัญหาที่คุณพบหรือไม่โดยลองใช้ URL รูปภาพอื่นที่ไม่มีอักขระที่ต้องใช้ Escape

คุณสามารถทำได้กับข้อมูลในคอมโพเนนต์โดยใช้ Javascripts ที่สร้างขึ้นในencodeURI ()วิธี

โดยส่วนตัวแล้วฉันต้องการสร้างไปป์เพื่อให้สามารถใช้ในเทมเพลตได้

ในการทำเช่นนี้คุณสามารถสร้างท่อที่เรียบง่ายมาก ตัวอย่างเช่น:

src / app / ไปป์ / เข้ารหัส 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>

คุณสามารถใช้ 2 วิธี:

วิธีที่ 1

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

วิธีที่ 2

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

หมายเหตุ: สิ่งสำคัญคือต้องล้อมรอบ URL ด้วย"ถ่าน

ภาพส่วนใหญ่จะไม่แสดงเนื่องจาก URL ของคุณมีช่องว่าง ในกรณีของคุณคุณเกือบจะทำทุกอย่างถูกต้องแล้ว ยกเว้นสิ่งหนึ่ง - คุณยังไม่ได้เพิ่มเครื่องหมายคำพูดเดียวเหมือนที่คุณทำหากคุณระบุภาพพื้นหลังใน css Ie

.bg-img {                \/          \/
    background-image: url('http://...');
}

ในการหลีกเลี่ยงอักขระ quot ใน HTML ผ่าน \ '

                                          \/                                  \/
<div [ngStyle]="{'background-image': 'url(\''+ item.color.catalogImageLink + '\')'}"></div>

วิธีแก้ปัญหาของฉันโดยใช้คำสั่ง if..else เป็นแนวทางปฏิบัติที่ดีเสมอหากคุณต้องการหลีกเลี่ยงความผิดหวังที่ไม่จำเป็นเพื่อตรวจสอบว่าตัวแปรของคุณมีอยู่และได้รับการตั้งค่าแล้ว มิฉะนั้นให้จัดเตรียมภาพสำรองไว้ในกรณี คุณยังสามารถระบุคุณสมบัติหลายสไตล์เช่นbackground-position: centerฯลฯ

<div [ngStyle]="{'background-image': this.photo ? 'url(' + this.photo + ')' : 'https://placehold.it/70x70', 'background-position': 'center' }"></div>