如何添加背景图像使用 ngStyle (angular2) ？

小开

最佳答案

我想你可以试试这个:

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

参见

小开

看起来您的样式已经被消毒过了，为了绕过它，可以尝试使用 DomSanitizer 中的 bassSecurityTrustStyle 方法。

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 来检查这是否是您遇到的问题。

您可以使用 EncodeURI ()方法中构建的 Javascript 对组件中的数据执行此操作。

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

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

Src/app/lines/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>

小开

你可以使用两种方法:

方法1

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

方法2

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

注意: 用 "字符包围 URL 是很重要的。

小开

大多数情况下图像不会显示，因为 URL 包含空格。在你的情况下，你几乎做了所有正确的事情。除了一件事-你没有添加单引号，如果你指定的 CSS 背景图像也就是说。

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

要在 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>