Using a SafeUrl in a background image CSS expression with ngStyle?

Question

Trying to set a background image using SafeUrl like this.

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

The img tag renders, but the div does not.

Any ideas?

This is the Stackblitz demo:

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

The image is loaded like this:

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

Dusan Radovanovic · Accepted Answer · 2020-04-01T20:36:16.663

1

Background-image property syntax for URLs is url("[URL]")

html

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

ts

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

edited Apr 01 '20 at 20:36

answered Apr 01 '20 at 20:29

Dusan Radovanovic

1,599
12
21

Tried it but now love: https://stackblitz.com/edit/angular-blob-to-safe-url-fork?file=src%2Fapp%2Fapp.component.ts – Ole Apr 01 '20 at 20:35
Interesting string ... `changingThisBreaksApplicationSecurity` ... – Ole Apr 01 '20 at 20:40
1

I am glad I helped :D If it works, you can accept and upvote the answer :D – Dusan Radovanovic Apr 01 '20 at 20:41
It was funny to me when I saw `changingThisBreaksApplicationSecurity` for the first time also :D – Dusan Radovanovic Apr 01 '20 at 20:44
Yeah :) - I gave your other answers some love too - so you should see a point boost - Thanks again - I'm so happy this works!! – Ole Apr 01 '20 at 20:44

Using a SafeUrl in a background image CSS expression with ngStyle?

1 Answers1