使用 *ngfor 时如何动态设置背景图像 URL [重复]

Posted 2023-02-22

【中文标题】使用 *ngfor 时如何动态设置背景图像 URL [重复]

【英文标题】：How to set background-image URL dynamically when using *ngfor [duplicate]

【发布时间】：2019-08-16 03:36:15

【问题描述】：

我正在尝试获取 *ngfor 生成的重复开发的背景图片，该开发来自 get 请求。

所有其他值都可以完美运行并被获取。但网址。它正在被获取，但它没有在我的 html 文件中呈现。所以 div 只是显示没有背景图像。

这是使用Ionic 4 和Angular 7。我找到了其他一些解决方案，但它适用于 angular 2 和更早的版本。

试过了： [style.backgroundImage]="'url(' + bgImage + ')'" 和 <div [ngStyle]=" background-image: 'url(' + getBackgroundStyle(post) + ')' "></div> 但都没有工作。

这是我的代码：

  <div *ngFor="let fos of items">
  <div  class="item_card" style="background: url(fos.item_image_1);height: 350px;margin-top: 50px;" >
    <ion-badge class="title_badge" >fos.item_category<br><br> fos.item_title</ion-badge>
    <ion-badge class="price_badge" color="success">fos.item_action<br><br>fos.item_price EGP<br><br>fos.item_city</ion-badge>
    </div>
    </div>

我正在获取所有值 fos.item_category , fos.item_action..etc，但 url 不起作用。

【问题讨论】：

或者试试这个：***.com/a/37577381/9386929

【参考方案1】：

正如@ninecraft 在他的评论中所建议的那样……this answer gave me the solution

[style.background-image]="'url('+for.item_image_1+')'" 工作，但它没有调整图像的大小，这就是我认为它不起作用的原因，我需要使用[style.background-size]="'100% 350px'" 来调整图像的大小并且效果很好。