Fetch url locally in angular

Question

I am working with simple Angular project. I have JSON file of 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"}]

This is the interface i am using

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

But i am not able to load that cover image url. I am getting empty list.

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

Answer 1

图像文件不是直接在 HTML 中加载的，因此您需要<img>标签来加载图像，如下所示..

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

Answer 2

Try like this:

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

Working Demo

Answer 3

Image file cannot load directly, so you need tag :

  <ul *ngFor="let restaurant of restaurants">
        <li>
            <img [src]="restaurant.coverImage" height="300"/>
        </li>
  </ul>