将图像json对象显示为离子列表（v2）

Question

我有一个json对象，其中包含图像的id及其在服务器中的url，为了在离子列表中显示它，我尝试下面的代码，但图像不会出现。

About.html

<ion-content padding>

  <ion-list>
    <ion-item *ngFor="let post of posts">
      <img [src]="post.pic"/>
    </ion-item>
  </ion-list>

</ion-content>

这是我的json对象：

{"ListeImages":[{"id":"44","pic":"https:\/\/stationpfe.000webhostapp.com\/projet\/uploads\/1494201248244.jpg"}],"success":1}

About.ts

＆＃13;

＆＃13;

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {Imageservice} from '../../providers/imageservice';
import { Http } from '@angular/http';
@Component({
  selector: 'page-about',
  templateUrl: 'about.html',
  providers:[Imageservice]
})
export class AboutPage {
posts: any;
  constructor(public navCtrl: NavController,public im:Imageservice,public http: Http) {
this.getImages();
 
  }

getImages(){
this.im.OneArrive().subscribe(response=>
{
  this.posts=response.ListeImages;
});

}
}

＆＃13;

＆＃13;

＆＃13;

imageservice.ts（provider）

＆＃13;

＆＃13;

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';


@Injectable()
export class Imageservice {

  constructor(public http: Http) {
    console.log('Hello Imageservice Provider');
  }
public OneArrive(){
var url='https://stationpfe.000webhostapp.com/projet/SelectListeImages.php';
     return this.http.get(url).map(res=>res.json()); 
}
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

<ion-avatar item-left>

      <img [src]="imageUrl+card.image" />
</ion-avatar>

我已将图片网址存储在.ts文件中，card.image值是我从服务器获取的值。 在我的情况下，我有一个服务器存储=＆gt; http://311.11.111.111:8000/storage＆lt; =喜欢这个 我指定存储+来自api的值以显示在      上面指定的<img [scr]=""/>。 希望它有所帮助......