如何在ionic 3中的div中设置背景图像？

Question

我正在尝试将图像显示为背景，以及它在下面的外观。

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

但是，我希望它动态加载图像，请参见下面的代码，不幸的是它无法正常工作。

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

有人可以帮我吗？

谢谢。

Answer 1

使用ngStyle这样的指令

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

Answer 2

您也可以尝试

HTML

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

TS

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

Answer 3

嗨，这是一个有效的代码段。

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

因此，我希望您在下面进行此类操作：

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

希望对您有帮助。