Css [ngStyle]中的相对URL

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

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

以及标记中的此更新：

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

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

“模板分析错误：
分析器错误：在ng:///AppModule/AppBannerComponent中[{'background-image'：'url（'+banner | safeHtml+'）'）}]的第49列缺少预期的}。html@0：5（\“][ngStyle]=\“{'background-image'：'url（'+banner | safeHtml+'）'）}\”>
\“”：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 -->

---

好吧，回答有点晚，但我今天刚刚面对这个问题，通过将HTML实体定义

“

添加到

css

url

参数中来解决，如：

'url（“+banner | safeHtml+”）

因此：

您还可以使用

backgroundImage

：

[ngStyle]=“{backgroundImage:'url（“+banner | safeHtml+”）”}”

---

希望对您有所帮助……

您是否尝试过这样包装

banner | safeHtml

：

（banner | safeHtml）

？看起来您的问题是连接问题，因为模板解析中出现错误。我本以为我有，但我会再次检查。我再次检查并尝试了，但不知怎的隐藏在这篇文章中。我已修复并更新了这篇文章。@Eric您解决过这个问题吗？我是完全相同的问题！@TigerBear我知道这是一个w是的，但我刚刚发布了一个答案。

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

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