具有动态内容正确语法的 NgStyle angular 4/2

Question

我正在使用 NgStyle 动态设置容器的背景图像 angular 4.

此站点：表示正确的语法如下

[ngStyle]="{'background-image': venueobject.groupphoto[0]}">

或

[ngStyle]="{'background-image': 'venueobject.groupphoto[0]'}">

我还看到把整个东西变成一个字符串：

[ngStyle]="'background-image': 'url(' + 'venueobject.groupphoto[0]'+ ')'">

和

[ngStyle]="'background-image: url(' + venueobject.groupphoto[0] + ')'">

但我一直不明白。页面正在呈现，所以我的 html 没有损坏，但图像没有显示。

这目前不是 yay，我正在努力让它成为 yay。

请帮我把它弄好

拥抱和亲吻

Answer 1

您可以尝试以下方法：

在你的 ts 文件中：

import { DomSanitizer } from '@angular/platform-browser';

constructor(private sanitizer: DomSanitizer) { }

getBackgroundImg() {
    // replace the path to your image here
    const img = 'assets/img/wall.png';
    const style = `background-image: url(${img})`;
    // this is to bypass this warning 'WARNING: sanitizing unsafe style value background-image: url(assets/img/wall.png) (see http://g.co/ng/security#xss)'
    return this.sanitizer.bypassSecurityTrustStyle(style);
}

在您的 html 文件中：

<div [style]="getBackgroundImg()"></div>

您还需要设置 div 的宽度和高度才能看到图像。

具有动态内容正确语法的 NgStyle angular 4/2

NgStyle with dynamic content proper syntax angular 4/2

html

typescript

ng-style

angular