Question

我正在尝试获取由* 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，但网址不起作用。

Answer 1

如@ninecraft在他的评论中建议的.. this answer gave me the solution

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

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

1 个答案: