在带有 ngStyle 的背景图像 CSS 表达式中使用 SafeUrl？

Question

正在尝试像这样使用 SafeUrl 设置背景图片。

<h1>Image Test</h1>
<img [src]="imageURL" width="500px" height="500px">

<br>

<code>{{imageURL}}</code>

<div id="i" 
     class=".background-image"
     [ngStyle]="{'background-image': imageURL}">
></div>

img 标记呈现，但 div 不呈现。

有什么想法吗？

这是 Stackblitz 演示：

https://stackblitz.com/edit/angular-blob-to-safe-url?file=src%2Fapp%2Fapp.component.html

图片是这样加载的：

this.loadImage().subscribe(i=>
{
     this.image = i
      this.imageURL = this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(this.image))
})

Answer 1

URLs 的背景图像 属性 语法是 url("[URL]")

html

   <div id="i" 
         class=".background-image"
         [ngStyle]="{'background-image': getBackgroundImageUrl(imageURL)}">
    ></div>

ts

getBackgroundImageUrl(url) {
     return `url("${url.changingThisBreaksApplicationSecurity}")`;
}