2017-05-08 7 views
0

イオンリストに表示するために、画像のIDとそのURLを含むjsonオブジェクトがあります。以下のコードを試しますが、画像は表示されません。表示されません。ここimage jsonオブジェクトをイオンリストに表示する(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> 

は私のJSONオブジェクトです:

{"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; 
 
}); 
 

 
} 
 
}

私は.TSで画像のURLを格納している0

imageservice.ts(プロバイダ)

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

....それが役に立てば幸いURLがそこに表示されていない場合 – rashidnk

+0

あなたの購読 –

+0

セットAでエラーコールバックを設定し、、ウルJSONとprvblmをIMGのsrcクロムコンソールの値をチェックconsole.log on this.posts、データが実際に返されたか、リクエストしたのがエラーを返しましたか? @浦二さんのように、エラーコールバックを設定してエラーをキャッチします。 – TriDiamond

答えて

0
<ion-avatar item-left> 

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

はcard.image値iは、サーバから取得した値であるファイル。 私の場合、私はサーバーストレージ=>http://311.11.111.111:8000/storage < =このように 私は上記の
<img [scr]=""/>に表示するには、storage + apiの値を指定します。 は

enter image description here

関連する問題