How to display image of an API via URL with Angular-CodePudding

I'm learning Angular and for that I've been developing the Tour of Heroes tutorial from the documentation itself in

CodePudding user response：

Based on the screenshot you posted, image is not a string, is an object, change this in your interface:

export interface Heroi {
 id: string,
 name: string,
 image: { url: string }
}

<ul *ngFor="let heroi of herois">  
    <li>
       <p>{{ heroi.id }}</p>
       <p>{{ heroi.name }}</p>
       <img  
        *ngIf="heroi.image?.url"
        [src]="heroi.image.url" 
        [alt]="heroi.name">
    </li>
</ul>