Display image json object into ionic list ( v2) - json

Question

I have a json object that contains id of an image and its url in the server , in order to display it in an ion-list i try the code below but the image doesn't appear.
About.html
<ion-content padding>
<ion-list>
<ion-item *ngFor="let post of posts">
<img [src]="post.pic"/>
</ion-item>
</ion-list>
</ion-content>
here is my json object :
{"ListeImages":[{"id":"44","pic":"https:\/\/stationpfe.000webhostapp.com\/projet\/uploads\/1494201248244.jpg"}],"success":1}
About.ts
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;
});
}
}
imageservice.ts ( provider)
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());
}
}

Answer 1

<ion-avatar item-left>
<img [src]="imageUrl+card.image" />
</ion-avatar>
i have stored the image url in .ts file the card.image value is the value that i get from server.
In my case i have a server storage=>http://311.11.111.111:8000/storage<=like this
i specify the storage + the value from api to display in the
<img [scr]=""/> specified above.
Hope it helps....