Render image from Contentful to Angular

Question

i have a problem displaying the images i upload to contentful on my angular site. From the browser console the image is correctly loaded but I see a blank image on the screen.

Below my code:

1. contentful.service.ts

   import { Injectable } from '@angular/core';
   import { environment } from '../../environments/environments';
   import { createClient, Entry } from 'contentful';
   import { from } from 'rxjs';
   
   @Injectable({
     providedIn: 'root'
   })
   export class ContentfulService {
   
     constructor() { }
   
     private client = createClient({
       space: environment.spaceId,
       accessToken: environment.accessToken
     });
   
     getAllEntries() {
       const promise = this.client.getEntries();
       return from(promise);
     }
   
     getEntryById(id: string) {
       const promise = this.client.getEntry(id);
       return from(promise);
     }
   }
   
   

2. vendita.component.ts:

   import { Component } from '@angular/core';
   import { ActivatedRoute } from '@angular/router';
   import { Observable } from 'rxjs';
   import { ContentfulService } from '../services/contentful.service';
   import { Meta } from '@angular/platform-browser';
   import { query } from '@angular/animations';
   
   
   @Component({
     selector: 'app-vendita',
     templateUrl: './vendita.component.html',
     styleUrls: ['./vendita.component.css']
   })
   export class VenditaComponent {
   
     constructor(private contentfulService: ContentfulService, private route: ActivatedRoute, private meta: Meta) {}
   
     venditaPosts$ : Observable<any> | undefined;
   
     ngOnInit(): void {
       /*this.venditaPosts$ = this.contentfulService.getAllEntries();
   
       this.route.params.subscribe(
         params => {
           const id = params['id'];
   
         }
       )*/
   
       this.venditaPosts$ = this.contentfulService.getAllEntries();
   
   
   
       /*
       this.meta.addTag({
         name: 'description',
         content: 'Scopri le principali attrazioni e i musei di Roma nella nostra guida online. Dalle antiche rovine ai capolavori artistici, \
                   trova le principali attrazioni turistiche della Città Eterna. Leggi la nostra guida e scopri i tesori culturali di Roma, \
                   tra musei, monumenti e molto altro.'
       });*/
     }
   
   }
   
   

3. vendita.component.html

     <div class="container-fluid">
       <div class="row row-cols-1 row-cols-md-3 g-3 justify-content-center attraction-post-container" *ngIf="venditaPosts$ | async as venditaPosts">
         <div class="col" *ngFor="let venditaPost of venditaPosts.items">
           <div class="container-fluid text-start">
               <img [src]="venditaPost.fields.featuredImage.fields.file.url" class="img-fluid" style="width: 100px; height: 100px;">
               <h2 class="fs-4 py-1">{{venditaPost.fields.title}}</h2>
               <p>{{venditaPost.fields.summary}}</p>
               <a [routerLink]="['/venditaPost', venditaPost.sys.id]" class="btn btn-outline-dark">Leggi di più</a>
           </div>
         </div>
       </div>
     </div>
   </div>
   

enter image description here

in theory the above code should make me display the image but as seen in the screenshot, the image is blank.