Style background image URL depending on variable from HTML - Angular

Question

I am trying to create a div with a background of an image depending one picture.

I have tried this:

<div
  *ngIf="persona.photoURL"
  class="photo"
  style="background-image: url({{persona.photoURL}})"
></div>

but I get a div with an empty background. I know that bet.photoURL has a value. How could I achieve my goal?

Answer 1

Try with ngStyle

<div
  *ngIf="persona.photoURL"
  class="photo"
  [ngStyle]="{'background-image': 'url(' + persona.photoURL + ')'}"
></div>