对 Firebase 实时数据库的 HTTP 调用答案

【问题标题】：HTTP call to Firebase Realtime Database对 Firebase 实时数据库的 HTTP 调用
【发布时间】：2018-07-04 04:45:21
【问题描述】：

我是初学者，我在 IONIC 3 中使用简单的 HTTP 调用到 firebase 来检索数据。一切正常，但是当我尝试将图像 URL 添加到数据中时。输出是原始 URL 链接而不是显示图像。

我应该如何在 IONIC 3 中调用图像 URL 并链接到唯一的数据项？

谢谢。

输出：

这是 Firebase 原始数据：

这里是离子源代码：（API服务）

export class apiService {
     private baseUrl = 'https://mymenu-d4110.firebaseio.com';
    constructor(private http:Http){}

getMenu(){
    return new Promise(resolve =>{
        this.http.get(`${this.baseUrl}/menu-data/food.json`)
        .subscribe(res => resolve(res.json()));
    });
}

（功能代码）：

 ionViewDidLoad() {

    this.apiService.getMenu().then(data=>
    this.food = data);

  }

（HTML 代码）

 <ion-item>
    <ion-label>Name</ion-label>
    <ion-label>Description</ion-label>
    <ion-label>Price</ion-label>
    <ion-label>Photo</ion-label>
  </ion-item>

  <ion-item *ngFor="let item of food">
    <ion-label>{{item.name}} </ion-label>
    <ion-label>{{item.description}} </ion-label>
    <ion-label>{{item.chinese}} </ion-label>
    <ion-label>{{item.photo}} </ion-label>
  </ion-item>

【问题讨论】：

标签： json http ionic-framework firebase-realtime-database angular-promise

【解决方案1】：

尝试使用标签。交换

<ion-label>{{item.photo}} </ion-label>

与

<ion-img width="80" height="80" [src]="item.photo"></ion-img>

您可以在此处阅读更多信息：https://ionicframework.com/docs/api/components/img/Img/

编辑：附带说明一下，根据文档，如果您的图像不在 virtual-scoll 中，您应该使用 <img> 标签而不是 <ion-img>

【讨论】：