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

Question

I'm Trying to get the background image for a repeated dev that is being generated by *ngfor that comes from a get request.

Every other value works perfectly and being fetched. but the URL. it is being fetched but it's not being rendered in my HTML file.so the div simply is being shown with no background image.

This is using Ionic 4 and Angular 7. I found a few other solutions but it was for angular 2 and older versions.

Tried: [style.backgroundImage]="'url(' + bgImage + ')'" and <div [ngStyle]="{ background-image: 'url(' + getBackgroundStyle(post) + ')' }"></div> but none worked.

Here is my code :

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

Am getting all the values {{fos.item_category}} , {{fos.item_action}}..etc but the url is not working.

Or try this: https://stackoverflow.com/a/37577381/9386929 – nircraft Mar 25 '19 at 20:04 — nircraft, Mar 25 '19 at 20:04

score 0 · Accepted Answer · answered Mar 25 '19 at 20:20

as @ninecraft suggested in his comment .. this answer gave me the solution

[style.background-image]="'url('+for.item_image_1+')'" worked but it didn't resize the image that is why i thought it wasnt working,, i needed to use [style.background-size]="'100% 350px'" to resize the image and it worked perfectly.

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

1 Answers1