Question

如何使用ngStyle添加背景图像？我的代码不起作用：

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

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

Answer 1

我想你可以试试这个：

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

从阅读ngStyle表达式开始，我猜你错过了一些“'”......

Answer 2

你也可以试试这个：

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

另见

Answer 4

看起来您的样式已经过消毒，绕过它尝试使用DomSanitizer中的bypassSecurityTrustStyle方法。

＆＃13;

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 + ')');
  }

}

＆＃13;

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

＆＃13;

Answer 5

使用

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

Answer 6

我的背景图片不起作用，因为URL中有空格，因此我需要对其进行URL编码。

您可以通过尝试使用不包含需要转义字符的其他图像URL来检查这是否是您遇到的问题。

您可以仅使用encodeURI()方法中内置的Javascript对组件中的数据执行此操作。

我个人想为其创建一个管道，以便可以在模板中使用它。

为此，您可以创建一个非常简单的管道。例如：

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>

Answer 7

您可以使用2种方法：

方法1

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

方法2

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

注意：使用“ 字符括住URL非常重要。

Answer 8

由于您的URL包含空格，因此大部分图像不会显示。对于您而言，您几乎可以做所有正确的事情。除了一件事-如果您在CSS中指定background-image，则没有像您一样添加单引号即

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

为此，通过\'

来转义HTML中的引号字符

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

Answer 9

我的解决方案，使用if..else语句。如果要避免不必要的挫败感，请检查变量是否存在并已设置，这始终是一个好习惯。否则，请提供备用图片；您还可以指定多个样式属性，例如background-position: center等。

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

如何使用ngStyle（angular2）添加背景图像？

9 个答案:

方法1

方法2