Question

尝试向我们提供相对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 -->

Answer 1

好吧，这是一个迟到的答案，但我今天刚刚面对这个问题，并通过将HTML实体定义"添加到css url参数来解决，例如：

'url("'+ banner | safeHtml +'")'

所以：

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

您也可以使用backgroundImage：

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

希望它有所帮助...

[ngStyle]中的相对URL

1 个答案: