来自 json url 的离子显示图像
Posted
技术标签:
【中文标题】来自 json url 的离子显示图像【英文标题】：Ionic display image from json url 【发布时间】：2019-06-18 16:28:15 【问题描述】：我正在尝试在离子卡上显示来自 json 的图像。我在控制台日志中收到 JSON 响应，但无法显示图像。所以我最终有一张空白卡。我显然在 html 中搞砸了一些东西。任何帮助都会非常感谢您！下面是一张空卡的截图。
主页.Html
<ion-card>
<ion-card-content>
<ion-item *ngFor="let attribute of attributes">
<img data-src='attribute.pic_url' />
<ion-card-title>
attributes.description
</ion-card-title>
</ion-item>
</ion-card-content>
</ion-card>
home.ts
@Component(
selector: 'page-home',
templateUrl: 'home.html'
)
export class HomePage
private storymap : FormGroup;
private title: string;
private author: string;
private link: string;
private inputName='';
private result: any;
private data: Observable<any>;
private appid = this.inputName.substring(this.inputName.indexOf("appid=")+6,this.inputName.length);
private subtitle: string;
private attributes: string[];
private geometry: any[] = [];
private photo: string[];
constructor(public navCtrl: NavController, public http:HttpClient, private formBuilder: FormBuilder)
this.storymap = this.formBuilder.group(
storymapurl: [''],
title: ['', Validators.required],
author: [''],
description: [''],
);
logForm()
if ( this.inputName.length > 3 )
this.appid = this.inputName.substring(this.inputName.indexOf("appid=")+6,this.inputName.length);
console.log(this.appid);
fetch(`https://www.arcgis.com/sharing/rest/content/items/$this.appid/data?f=json`)
.then(response => response.json())
.then(metadata =>
this.title = metadata["values"]["title"]
//console.log(this.title)
this.subtitle = metadata["values"]["subtitle"]
this.author = metadata["values"]["author"]
//console.log(this.subtitle)
return fetch(`https://www.arcgis.com/sharing/rest/content/items/$metadata["values"]["webmap"]/data?f=json`)
)
.then(response => response.json())
.then(data =>
let data_res = Array.of(data);
this.attributes = Object.keys(data_res["operationalLayers"]["0"]["featureCollection"]["layers"]["0"]["featureSet"]["features"]["0"]["attributes"]);
console.log(this.attributes.pic_url);
this.geometry = Object.keys(data["operationalLayers"]["0"]["featureCollection"]["layers"]["0"]["featureSet"]["features"]["0"]["geometry"])
//this.photo = Object.keys(data["operationalLayers"]["0"]["featureCollection"]["layers"]["0"]["featureSet"]["features"]["0"]["attributes"]["pic_url"])
//console.log(this.photo)
console.log(data)
return this.attributes
);
console.log(this.storymap.value)
【问题讨论】：
什么 console.log(attribute.pic_url);说？很可能是空的。 正确的@Whatatimetobealive 我需要帮助获取 url 链接console.log(this.attributes) 的结果是什么？如果你在这里发布数组会更好，而不是屏幕截图。
' (7) ["name", "description", "icon_color", "pic_url", "thumb_url", "is_video", "OBJECTID"] 0: "name" 1 : "description" 2: "icon_color" 3: "pic_url" 4: "thumb_url" 5: "is_video" 6: "__OBJECTID" 长度: 7 __proto: Array(0)'
【参考方案1】：
home.html
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<form [formGroup]="storymap"(ngSubmit)="logForm()">
<ion-item>
<ion-label color="primary">URL</ion-label>
<ion-input type="text" placeholder="Storymap URL" formControlName="storymapurl" [(ngModel)]="inputName"></ion-input>
<button item-right ion-button (click) = "logForm()">Get Data</button>
</ion-item>
<ion-item>
<ion-label>Storymap Title:</ion-label>
<ion-input type="text" formControlName="title" [(ngModel)] ="title"></ion-input>
</ion-item>
<ion-item>
<ion-label>Author:</ion-label>
<ion-input type="text" formControlName="author" [(ngModel)] ="author"></ion-input>
</ion-item>
<ion-item>
<ion-label>Description:</ion-label>
<ion-textarea type="text" formControlName="description" [(ngModel)] ="subtitle" ></ion-textarea>
</ion-item>
<ion-item>
<button ion-button [disabled]="geometry.length > 0">True</button>
<ion-card>
<ion-card-content>
<ion-item>
<ion-card-title>
attributes.description
</ion-card-title>
</ion-item>
</ion-card-content>
<img [src]='attributes.pic_url' />
</ion-card>
</ion-item>
<button ion-button type="submit" [disabled]="!storymap.valid">Submit</button>
</form>
</ion-content>
home.ts
import Component from '@angular/core';
import NavController from 'ionic-angular';
import Validators, FormBuilder, FormGroup from '@angular/forms';
import HttpClient,HttpHeaders from '@angular/common/http';
import Observable from 'rxjs/Observable';
@Component(
selector: 'page-home',
templateUrl: 'home.html'
)
export class HomePage
private storymap : FormGroup;
private title: string;
private author: string;
private link: string;
private inputName='';
private data: Observable<any>;
private appid = this.inputName.substring(this.inputName.indexOf("appid=")+6,this.inputName.length);
private subtitle: string;
private attributes=
name:'',
icon_color:'',
is_video:'',
description:'',
pic_url:'',
thumb_url:''
private geometry: any[] = [];
private photo: string[];
constructor(public navCtrl: NavController, public http:HttpClient, private formBuilder: FormBuilder)
this.storymap = this.formBuilder.group(
storymapurl: [''],
title: ['', Validators.required],
author: [''],
description: [''],
);
logForm()
if ( this.inputName.length > 3 )
this.appid = this.inputName.substring(this.inputName.indexOf("appid=")+6,this.inputName.length);
console.log(this.appid);
fetch(`https://www.arcgis.com/sharing/rest/content/items/$this.appid/data?f=json`)
.then(res => res.json())
.then(json =>
console.log('val',json); // No Author in the array
this.title =json.values.title;
this.author=json.values.author;
this.subtitle = json.values.subtitle;
fetch(`https://www.arcgis.com/sharing/rest/content/items/$json.values.webmap/data?f=json`).then(res => res.json()
).then(json =>
//description value also null in the result you cant display
this.attributes.description =json.operationalLayers[0].featureCollection.layers[0].featureSet.features[0].attributes.description;
this.attributes.pic_url=json.operationalLayers[0].featureCollection.layers[0].featureSet.features[0].attributes.pic_url;
)
);
这里是stackblitz，您可以了解一下。
【讨论】：
这样会有所帮助，但现在我收到错误消息。错误：找不到“object”类型的不同支持对象“[object Object]”。 NgFor 只支持绑定到 Arrays 等 Iterables。 您需要将数据转换为 json 之类的 data.json();让我根据这个编辑我的答案 它不喜欢 .0。部分@Whatatimetobealive 是的。抱歉，现在我收到一个错误：未捕获（承诺）：TypeError：数据不是函数 TypeError：数据不是函数，让 data_res= data.json 所以我尝试了这个并得到一个错误错误错误：未捕获（承诺）：类型错误：无法读取未定义的属性“0”类型错误：无法读取未定义的属性“0”。所以然后我把它改回 ["0"] 并且我仍然得到同样的错误@whatatimetobealive【参考方案2】：试试这个 src 代码。
<ion-card>
<ion-card-content>
<ion-item *ngFor="let attribute of attributes">
<img ng-src='attribute.pic_url' />
<ion-card-title>
attributes.description
</ion-card-title>
</ion-item>
</ion-card-content>
</ion-card>
【讨论】：
以上是关于来自 json url 的离子显示图像的主要内容，如果未能解决你的问题，请参考以下文章
如何在 React 中显示来自 JSON URL 数组的图像