顯示圖像JSON對象到離子列表（v2）的

我有一個包含一個圖像的ID和其在服務器URL JSON對象，爲了在離子列表中顯示它我嘗試下面的代碼，但所述圖像沒有按不會出現。顯示圖像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; 
 
}); 
 

 
} 
 
}

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

來源

2017-05-08 Rami bellili

檢查IMG SRC鉻控制檯的值，如果沒有顯示有網址，以烏爾JSON的prvblm， – rashidnk

設置你的訂閱 –

設置一個錯誤回調console.log上this.posts，數據實際返回或您請求返回錯誤？就像@suraji說的那樣，設置一個錯誤回調來捕獲任何錯誤。 – TriDiamond

<ion-avatar item-left> 

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

我已經存儲了圖像的URL中的.ts文件的card.image值是我從服務器獲得的價值。在我的情況下，我有一個服務器存儲=>http://311.11.111.111:8000/storage < =像這樣我指定存儲+的值從api顯示在上面指定的
<img [scr]=""/>。希望它可以幫助....

來源

2017-12-08 07:21:44

顯示圖像JSON對象到離子列表（v2）的

回答

相關問題