[ngStyle] 中的相对 URL答案

【问题标题】：Relative URL in [ngStyle][ngStyle] 中的相对 URL
【发布时间】：2017-09-21 04:34:31
【问题描述】：

尝试使用相对 URL 来在 div 中设置背景图像。目前我正在尝试使用管道：

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

A2 在标记中呈现这个：

<div _ngcontent-c2="" ng-reflect-ng-style="[object Object]" style="background-image: url(http://localhost:8080/assets/raster/banners/banner-background-02-800x300.png);">
</div>

我尝试过使用管道：

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

@Pipe({name: 'safeHtml'})
export class SafeHtml {
  constructor(private sanitizer:DomSanitizer){}

  transform(html) {
    return this.sanitizer.bypassSecurityTrustHtml(html);
  }
}

标记中的这个更新：

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

这会导致控制台出现此错误：

"Template parse errors:
Parser Error: Missing expected } at column 49 in [{'background-image': 'url(' + banner | safeHtml + ')'}] in ng:///AppModule/AppBannerComponent.html@0:5 (\"<div [ERROR ->][ngStyle]=\"{'background-image': 'url(' + banner | safeHtml + ')'}\">
</div>\"): ng:///AppModule/AppBannerComponent.html@0:5"

我试过像这样包装绑定和管道：

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

但是在渲染中得到这个：

<div _ngcontent-c2="" ng-reflect-ng-style="[object Object]"></div>

正在努力实现这一目标：

<div _ngcontent-c2="" *ng-reflect-ng-style="[object Object]"* style="background-image: url(/assets/raster/banners/banner-background-02-800x300.png);">
</div> <!-- or whatever ng-reflect-ng-style would be if the binding and piping are correct -->

【问题讨论】：

您是否尝试过像这样包装banner | safeHtml：(banner | safeHtml)？看起来您的问题是串联问题，因为模板解析中发生错误。
我以为我有，但我会仔细检查。
我再次检查并尝试过，但它以某种方式隐藏在这篇文章中。我已经解决了这个问题并更新了帖子。
@Eric 你解决过这个问题吗？我也是同样的问题！
@TigerBear 我知道已经有一段时间了，但我刚刚发布了一个答案。

标签： css angular angular2-pipe

【解决方案1】：

好吧，这个答案有点晚了，但我今天刚刚遇到这个问题，并通过将 HTML 实体定义 &quot; 添加到 css url 参数来解决，例如：

'url(&quot;'+ banner | safeHtml +'&quot;)'

所以：

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

你也可以使用backgroundImage：

[ngStyle]="{backgroundImage: 'url(&quot;'+ banner | safeHtml +'&quot;)'}"

希望对你有帮助……

【讨论】：