2017-05-08 3 views
0

Ich habe ein JSON-Objekt, das ID eines Bildes und seine URL im Server enthält, um es in einer Liste anzuzeigen, ich versuche den Code unten, aber das Bild doesn nicht erscheinen.Bild anzeigen JSON-Objekt in ionische Liste (v2)

about.html

<ion-content padding> 

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

</ion-content> 

hier ist meine Json Objekt:

{"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 (Anbieter)

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()); 
 
} 
 
}

+0

Überprüfung der Wert src Chromkonsole img, wenn die URL nicht dort angezeigt wird, die prvblm mit ur json, – rashidnk

+0

einen Fehler Rückruf setzen in Ihrem –

+0

Set ein abonnieren console.log auf this.posts, sind die Daten tatsächlich zurückgegeben worden oder haben Sie einen Fehler zurückgegeben? Wie @suraji sagte, setze einen Fehler-Callback, um einen Fehler zu finden. – TriDiamond

Antwort

0
<ion-avatar item-left> 

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

ich die Bild-URL in .ts gespeicherten Datei der card.image Wert ist der Wert, den ich vom Server erhalten. In meinem Fall habe ich einen Serverspeicher =>http://311.11.111.111:8000/storage < = wie dieser ich spezifiziere den Speicher + den Wert von api, um im
<img [scr]=""/> oben angegeben anzuzeigen. Hoffe, es hilft ....

enter image description here