html - 在带有 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

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

html

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

ts

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