javascript - Hämta URL lokalt i angular

Jag arbetar med ett enkelt Angular-projekt. Jag har en JSON-fil med data

[{
"name": "Little Collins",
"area": "Bronx",
"city": "New York",
"coverImage": "https://images.unsplash.com/photo-1576808597967-93bd9aaa6bae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1241&q=80"}]

Det här är gränssnittet jag använder

export interface IRestaurant{
name: string,
area: string,
city: string,
coverImage: string}

Men jag kan inte ladda den där omslagsbildens URL. Jag får en tom lista.

<ul *ngFor="let restaurant of restaurants">
<li>{{restaurant.name}} - {{restaurant.area}} - {{restaurant.city}}</li>
<li>{{restaurant.coverImage}}</li>

Svar #1

Bildfil kan inte laddas direkt i HTML, så du behöver <img>-taggen för att ladda bilden som följande..

<img src="{{restaurant.coverImage}}" />

Svar #2

Prova så här:

<li>
    <img [src]="restaurant.coverImage" />
</li>

Arbetsdemo

Relaterade artiklar