使用 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}")`;
}