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

Question

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

所有其他值都可以正常工作并被提取。但是URL。它正在被获取，但它没有在我的 HTML file.so 中呈现，div 只是显示没有背景图像。

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

试过： [style.backgroundImage]="'url(' + bgImage + ')'" 和 <div [ngStyle]="{ background-image: 'url(' + getBackgroundStyle(post) + ')' }"></div> 但 none 有效。

这是我的代码：

  <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}}..等等，但 url 不工作。

Answer 1

正如@ninecraft 在他的评论中建议的那样..

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

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

How to set background-image URL dynamically when using *ngfor

ionic-framework

angular

ionic4