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());
}
}
Überprüfung der Wert src Chromkonsole img, wenn die URL nicht dort angezeigt wird, die prvblm mit ur json, – rashidnk
einen Fehler Rückruf setzen in Ihrem –
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