How to set background image inside div in ionic 3?

Question

I am trying to display image as background and that how it should look below.

<ion-thumbnail item-left="" style="background-image: url(http://192.168.90.72:8000/storage/profile/853990510/profile.jpg);background-size: 100%;">
</ion-thumbnail>

However I want it to load images dynamically please see the code below and unfortunately its not working.

<ion-thumbnail  ngStyle="background-image:url('{{ review.owner.profile.photo }}')" item-left>
</ion-thumbnail>

Can anyone help me with this?

Thanks in advance.

Answer 1

You can try this also

HTML

<ion-thumbnail  [ngStyle]="bgStyle" item-left></ion-thumbnail>

TS

this.bgStyle = {'background-image':`url(${this.review.owner.profile.photo})`}

Answer 2

With ngStyle directive like this

<ion-thumbnail  [ngStyle]="{'background-image':'url('+ review.owner.profile.photo +')'}" item-left>
</ion-thumbnail>

Answer 3

hi, this is a working snippet here.

<div class="img-in-zoom-viewer" style="background-image: url({{ imgURI }})"></div>

thus, i hope you do such things below:

<ion-thumbnail style="background-image: url({{ review.owner.profile.photo }})" item-left>
</ion-thumbnail>

hope it would help you.