Use dynamic css background image with url


I am trying to do something that look easy but I can’t find a solution for now…
I need to change dynamically a component (Stacklayout) background image and I wrote this code:

    <StackLayout style="background-image: url('{{ this.backgroundImage != undefined ? this.backgroundImage : '' }}');">

but I have an error if this.backgroundImage is undefined because url(“”) throw an error.
I have tried to use

    <StackLayout [style.background-image] = "backgroundImage" >

but I need to have an image, not a string in this.backgroundImage. I pure Angular we can use :

this.backgroundImage = this.sanitizer.bypassSecurityTrustStyle(`url(${page.backgroundImage.path})`);

but in Nativescript there is no DOM sanitizer and I don’t know how to solve this.

Anyone has an idea??



What if you do somethink like this?

<StackLayout [style.background-image]="backgroundImage ? 'url("' + backgroundImage + '")' : null" >

But I think it would be cleaner, if you did the string concatenation in JS/TS instead of in the template.

Something like this:

get backgroundImageUrl() {
   if (this.backgroundImage) {
     return `url("${this.backgroundImage}")`;

  return null


Thanks, works fine with backgroundImageUrl() !