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.

• Dan Hobbs: Can you see the network request for the image in dev tools, and can you open that image directly in the browser? Perhaps you've got a content security policy in place and img-src doesn't allow it. A couple of ideas to explore.

Answer 1

You may need to prepend your image URL with https:

So your image tag will look like so:

<img [src]="'https:' + venditaPost.fields.featuredImage.fields.file.url" class="img-fluid" style="width: 100px; height: 100px;">