来自 json url 的离子显示图像

Question

我正在尝试在离子卡上显示来自 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)

} }

Answer 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，您可以了解一下。

Answer 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>