对 Firebase 实时数据库的 HTTP 调用

Question

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

我应该如何在 IONIC 3 中将图像 URL 和 link 称为唯一数据项？

谢谢。

输出：

这是 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>

Answer 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>

对 Firebase 实时数据库的 HTTP 调用

HTTP call to Firebase Realtime Database

json

http

ionic-framework

angular-promise

firebase-realtime-database