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?

Sunil · Accepted Answer · 2018-11-16 19:26:29Z

4

Try with ngStyle

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

answered Nov 16, 2018 at 19:26

Sunil

11.3k2 gold badges29 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Made my day, buddy. I will mark it as correct as soon as I can