将图像从 Contentful 渲染为 Angular

Question

我在有角度的网站上显示我上传到 contentful 的图像时遇到问题。 从浏览器控制台，图像已正确加载，但我在屏幕上看到空白图像。

在我的代码下面：

1. 内容丰富的.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>
   

理论上，上面的代码应该让我显示图像，但如屏幕截图所示，图像是空白的。

Answer 1

您可能需要在图像 URL 前面添加

https:

因此您的图像标签将如下所示：

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