javascript - 以 Angular 本地获取网址

Question

我正在处理简单的 Angular 项目。我有 JSON 数据文件

[{
"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"}]

这是我正在使用的界面

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

但我无法加载该封面图片网址。我得到空列表。

<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}}" />