代码之家  ›  专栏  ›  技术社区  ›  Jesus Erwin Suarez

如何在离子3中设置div内的背景图像?

  •  2
  • Jesus Erwin Suarez  · 技术社区  · 6 年前

    我试图显示图像作为背景,它应该如何看下面。

    <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>
    

    有人能帮我吗?

    提前谢谢。

    3 回复  |  直到 6 年前
        1
  •  1
  •   Muhammed Albarmavi    6 年前

    ngStyle 这样的指令

    <ion-thumbnail  [ngStyle]="{'background-image':'url('+ review.owner.profile.photo +')'}" item-left>
    </ion-thumbnail>
    
        2
  •  1
  •   R. Viral    6 年前

    你也可以试试这个

    HTML

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

    TS

    this.bgStyle = {'background-image':`url(${this.review.owner.profile.photo})`}
    
        3
  •  0
  •   SuperStar518 JamesE    6 年前

    嗨,这是一个工作片段。

    <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>
    

    希望对你有帮助。