堆棧內存溢出
  簡體   English   中英

Angular 6：從獲取的API中使用Json顯示圖像時出錯

[英]Angular 6: Error in displaying images using Json from fetched API

 原文  2019-07-14 11:50:07  7   1    angular/ typescript/ api/ angular6/ angular6-json-schema-form

問題描述

我正在嘗試從Angular 6中的Pexel API獲取圖像。我正確地從API獲取了響應，我可以在console.log中看到它。 我在訪問獲取的響應的URL時遇到困難，因此我無法在網頁中顯示圖像。

我嘗試了訪問JSON的常規方法。

我正在嘗試使用以下HTML中的photos對象訪問URL： 

<div
    class="col-xs-12 col-sm-6 col-md-4 col-lg-4 mt-10"
    *ngFor="let image of gallery?.photos"
  >
    <mat-card>
      <img mat-card-image *ngIf="image.url"[src]="image.url" alt="" />
      <mat-card-actions>
        <button mat-icon-button color="warn" ><mat-icon aria-hidden="false" aria-label="Example home icon">favorite</mat-icon>
</button>
      </mat-card-actions>
    </mat-card>
  </div>

TypeScript文件 

import { Component, OnInit, OnDestroy } from '@angular/core';
import { GalleryService } from '../services/gallery.service';
import { MatSnackBar } from '@angular/material/snack-bar';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit, OnDestroy {

  gallery : any;
  gallerySubscription;
  constructor(private galleryService: GalleryService,private snackBar: MatSnackBar) { }

  ngOnInit() {
    this.getData();
  }

  getData() {
    this.gallerySubscription = this.galleryService.getData('https://api.pexels.com/v1/curated?per_page=15&page=1').subscribe(data => {
      this.gallery=data;
    });
  }
  ngOnDestroy() {
    this.gallerySubscription.unsubscribe();
  }


    onFavorite(image) {
    console.log(image);

    let items = [];
    const val = localStorage.getItem('items');

    if (val !== null) {
      items = JSON.parse(val);
    }
    items.push(image);
    localStorage.setItem('items', JSON.stringify(items));
    this.snackBar.open('Added to Favorite', 'Close', {
     duration: 2000});
  }
}

GalleryService文件 

import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';
import { HttpClient } from '@angular/common/http';
import { tap } from 'rxjs/operators';
import { Headers, Http } from '@angular/http';
import { HttpModule } from '@angular/http';

const apiKey = environment.apiKey;
const apiUrl = environment.apiUrl;

//const params = new HttpParams().set('apiKey', apiKey);

@Injectable({
  providedIn: 'root'
})
export class GalleryService {

  constructor(private http: Http) { }
  getData(url) {

    const headers = new Headers({'Authorization': '563492ad6f917000010000018236385dbb9a43afv77e6f3d4d921efe'});

    return this.http.get(`${url}`, { headers: headers }).pipe(
      tap(value => {
        console.log(value);
      })
    );
  }
}

**出於安全考慮，我更改了API KEY。

API的響應 

   {
   "page":1,
   "per_page":15,
   "photos":[
      {
         "id":1115804,
         "width":3024,
         "height":3024,
         "url":"https://www.pexels.com/photo/white-2-storey-house-near-trees-1115804/",
         "photographer":"PixaSquare",
         "photographer_url":"https://www.pexels.com/@pixasquare-18782",
         "src":{
            "original":"https://images.pexels.com/photos/1115804/pexels-photo-1115804.jpeg",
            "large2x":"https://images.pexels.com/photos/1115804/pexels-photo-1115804.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
            "large":"https://images.pexels.com/photos/1115804/pexels-photo-1115804.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
            "medium":"https://images.pexels.com/photos/1115804/pexels-photo-1115804.jpeg?auto=compress&cs=tinysrgb&h=350",
            "small":"https://images.pexels.com/photos/1115804/pexels-photo-1115804.jpeg?auto=compress&cs=tinysrgb&h=130",
            "portrait":"https://images.pexels.com/photos/1115804/pexels-photo-1115804.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=1200&w=800",
            "landscape":"https://images.pexels.com/photos/1115804/pexels-photo-1115804.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200",
            "tiny":"https://images.pexels.com/photos/1115804/pexels-photo-1115804.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&h=200&w=280"
         }
      },
      {
         "id":2253065,
         "width":5184,
         "height":3456,
         "url":"https://www.pexels.com/photo/woman-laughing-2253065/",
         "photographer":"favachofotos",
         "photographer_url":"https://www.pexels.com/@favachofotos-918086",
         "src":{
            "original":"https://images.pexels.com/photos/2253065/pexels-photo-2253065.jpeg",
            "large2x":"https://images.pexels.com/photos/2253065/pexels-photo-2253065.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
            "large":"https://images.pexels.com/photos/2253065/pexels-photo-2253065.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
            "medium":"https://images.pexels.com/photos/2253065/pexels-photo-2253065.jpeg?auto=compress&cs=tinysrgb&h=350",
            "small":"https://images.pexels.com/photos/2253065/pexels-photo-2253065.jpeg?auto=compress&cs=tinysrgb&h=130",
            "portrait":"https://images.pexels.com/photos/2253065/pexels-photo-2253065.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=1200&w=800",
            "landscape":"https://images.pexels.com/photos/2253065/pexels-photo-2253065.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200",
            "tiny":"https://images.pexels.com/photos/2253065/pexels-photo-2253065.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&h=200&w=280"
         }
      },
      {
         "id":2253618,
         "width":6000,
         "height":4000,
         "url":"https://www.pexels.com/photo/aerial-photography-of-concrete-buildings-2253618/",
         "photographer":"Corey Smith",
         "photographer_url":"https://www.pexels.com/@corey-smith-849113",
         "src":{
            "original":"https://images.pexels.com/photos/2253618/pexels-photo-2253618.jpeg",
            "large2x":"https://images.pexels.com/photos/2253618/pexels-photo-2253618.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
            "large":"https://images.pexels.com/photos/2253618/pexels-photo-2253618.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
            "medium":"https://images.pexels.com/photos/2253618/pexels-photo-2253618.jpeg?auto=compress&cs=tinysrgb&h=350",
            "small":"https://images.pexels.com/photos/2253618/pexels-photo-2253618.jpeg?auto=compress&cs=tinysrgb&h=130",
            "portrait":"https://images.pexels.com/photos/2253618/pexels-photo-2253618.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=1200&w=800",
            "landscape":"https://images.pexels.com/photos/2253618/pexels-photo-2253618.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200",
            "tiny":"https://images.pexels.com/photos/2253618/pexels-photo-2253618.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&h=200&w=280"
         }
      },
      {
         "id":2209382,
         "width":3840,
         "height":5760,
         "url":"https://www.pexels.com/photo/red-strawberries-2209382/",
         "photographer":"Oleg Magni",
         "photographer_url":"https://www.pexels.com/@oleg-magni",
         "src":{
            "original":"https://images.pexels.com/photos/2209382/pexels-photo-2209382.jpeg",
            "large2x":"https://images.pexels.com/photos/2209382/pexels-photo-2209382.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
            "large":"https://images.pexels.com/photos/2209382/pexels-photo-2209382.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
            "medium":"https://images.pexels.com/photos/2209382/pexels-photo-2209382.jpeg?auto=compress&cs=tinysrgb&h=350",
            "small":"https://images.pexels.com/photos/2209382/pexels-photo-2209382.jpeg?auto=compress&cs=tinysrgb&h=130",
            "portrait":"https://images.pexels.com/photos/2209382/pexels-photo-2209382.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=1200&w=800",
            "landscape":"https://images.pexels.com/photos/2209382/pexels-photo-2209382.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200",
            "tiny":"https://images.pexels.com/photos/2209382/pexels-photo-2209382.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&h=200&w=280"
         }
      },
      {
         "id":1858161,
         "width":3640,
         "height":4550,
         "url":"https://www.pexels.com/photo/aerial-photo-of-sea-1858161/",
         "photographer":"Simon Clayton",
         "photographer_url":"https://www.pexels.com/@sglc",
         "src":{
            "original":"https://images.pexels.com/photos/1858161/pexels-photo-1858161.jpeg",
            "large2x":"https://images.pexels.com/photos/1858161/pexels-photo-1858161.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
            "large":"https://images.pexels.com/photos/1858161/pexels-photo-1858161.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
            "medium":"https://images.pexels.com/photos/1858161/pexels-photo-1858161.jpeg?auto=compress&cs=tinysrgb&h=350",
            "small":"https://images.pexels.com/photos/1858161/pexels-photo-1858161.jpeg?auto=compress&cs=tinysrgb&h=130",
            "portrait":"https://images.pexels.com/photos/1858161/pexels-photo-1858161.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=1200&w=800",
            "landscape":"https://images.pexels.com/photos/1858161/pexels-photo-1858161.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200",
            "tiny":"https://images.pexels.com/photos/1858161/pexels-photo-1858161.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&h=200&w=280"
         }
      },
      {
         "id":2277653,
         "width":3024,
         "height":3779,
         "url":"https://www.pexels.com/photo/blue-metal-bistro-sets-near-potted-flowers-and-road-2277653/",
         "photographer":"Juany Jimenez Torres",
         "photographer_url":"https://www.pexels.com/@juany-jimenez-torres-962962",
         "src":{
            "original":"https://images.pexels.com/photos/2277653/pexels-photo-2277653.jpeg",
            "large2x":"https://images.pexels.com/photos/2277653/pexels-photo-2277653.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
            "large":"https://images.pexels.com/photos/2277653/pexels-photo-2277653.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
            "medium":"https://images.pexels.com/photos/2277653/pexels-photo-2277653.jpeg?auto=compress&cs=tinysrgb&h=350",
            "small":"https://images.pexels.com/photos/2277653/pexels-photo-2277653.jpeg?auto=compress&cs=tinysrgb&h=130",
            "portrait":"https://images.pexels.com/photos/2277653/pexels-photo-2277653.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=1200&w=800",
            "landscape":"https://images.pexels.com/photos/2277653/pexels-photo-2277653.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200",
            "tiny":"https://images.pexels.com/photos/2277653/pexels-photo-2277653.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&h=200&w=280"
         }
      },
      {
         "id":1408183,
         "width":4160,
         "height":6240,
         "url":"https://www.pexels.com/photo/woman-standing-in-dim-lighted-room-1408183/",
         "photographer":"Luis Quintero",
         "photographer_url":"https://www.pexels.com/@jibarofoto",
         "src":{
            "original":"https://images.pexels.com/photos/1408183/pexels-photo-1408183.jpeg",
            "large2x":"https://images.pexels.com/photos/1408183/pexels-photo-1408183.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
            "large":"https://images.pexels.com/photos/1408183/pexels-photo-1408183.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
            "medium":"https://images.pexels.com/photos/1408183/pexels-photo-1408183.jpeg?auto=compress&cs=tinysrgb&h=350",
            "small":"https://images.pexels.com/photos/1408183/pexels-photo-1408183.jpeg?auto=compress&cs=tinysrgb&h=130",
            "portrait":"https://images.pexels.com/photos/1408183/pexels-photo-1408183.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=1200&w=800",
            "landscape":"https://images.pexels.com/photos/1408183/pexels-photo-1408183.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200",
            "tiny":"https://images.pexels.com/photos/1408183/pexels-photo-1408183.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&h=200&w=280"
         }
      },
      {
         "id":2156311,
         "width":5760,
         "height":3840,
         "url":"https://www.pexels.com/photo/blue-discus-fish-2156311/",
         "photographer":"Lone Jensen",
         "photographer_url":"https://www.pexels.com/@lone-jensen-431642",
         "src":{
            "original":"https://images.pexels.com/photos/2156311/pexels-photo-2156311.jpeg",
            "large2x":"https://images.pexels.com/photos/2156311/pexels-photo-2156311.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
            "large":"https://images.pexels.com/photos/2156311/pexels-photo-2156311.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
            "medium":"https://images.pexels.com/photos/2156311/pexels-photo-2156311.jpeg?auto=compress&cs=tinysrgb&h=350",
            "small":"https://images.pexels.com/photos/2156311/pexels-photo-2156311.jpeg?auto=compress&cs=tinysrgb&h=130",
            "portrait":"https://images.pexels.com/photos/2156311/pexels-photo-2156311.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=1200&w=800",
            "landscape":"https://images.pexels.com/photos/2156311/pexels-photo-2156311.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200",
            "tiny":"https://images.pexels.com/photos/2156311/pexels-photo-2156311.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&h=200&w=280"
         }
      },
      {
         "id":1278566,
         "width":5184,
         "height":3456,
         "url":"https://www.pexels.com/photo/man-tattooed-praying-1278566/",
         "photographer":"Ric Rodrigues",
         "photographer_url":"https://www.pexels.com/@ricrodrigues",
         "src":{
            "original":"https://images.pexels.com/photos/1278566/pexels-photo-1278566.jpeg",
            "large2x":"https://images.pexels.com/photos/1278566/pexels-photo-1278566.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
            "large":"https://images.pexels.com/photos/1278566/pexels-photo-1278566.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
            "medium":"https://images.pexels.com/photos/1278566/pexels-photo-1278566.jpeg?auto=compress&cs=tinysrgb&h=350",
            "small":"https://images.pexels.com/photos/1278566/pexels-photo-1278566.jpeg?auto=compress&cs=tinysrgb&h=130",
            "portrait":"https://images.pexels.com/photos/1278566/pexels-photo-1278566.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=1200&w=800",
            "landscape":"https://images.pexels.com/photos/1278566/pexels-photo-1278566.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200",
            "tiny":"https://images.pexels.com/photos/1278566/pexels-photo-1278566.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&h=200&w=280"
         }
      },
      {
         "id":1404819,
         "width":5000,
         "height":3337,
         "url":"https://www.pexels.com/photo/calico-cat-on-focus-photo-1404819/",
         "photographer":"Cong H",
         "photographer_url":"https://www.pexels.com/@cong-h-613161",
         "src":{
            "original":"https://images.pexels.com/photos/1404819/pexels-photo-1404819.jpeg",
            "large2x":"https://images.pexels.com/photos/1404819/pexels-photo-1404819.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
            "large":"https://images.pexels.com/photos/1404819/pexels-photo-1404819.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
            "medium":"https://images.pexels.com/photos/1404819/pexels-photo-1404819.jpeg?auto=compress&cs=tinysrgb&h=350",
            "small":"https://images.pexels.com/photos/1404819/pexels-photo-1404819.jpeg?auto=compress&cs=tinysrgb&h=130",
            "portrait":"https://images.pexels.com/photos/1404819/pexels-photo-1404819.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=1200&w=800",
            "landscape":"https://images.pexels.com/photos/1404819/pexels-photo-1404819.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200",
            "tiny":"https://images.pexels.com/photos/1404819/pexels-photo-1404819.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&h=200&w=280"
         }
      },
      {
         "id":979247,
         "width":6000,
         "height":4000,
         "url":"https://www.pexels.com/photo/stretching-white-cat-979247/",
         "photographer":"Tamba Budiarsana",
         "photographer_url":"https://www.pexels.com/@tamba09",
         "src":{
            "original":"https://images.pexels.com/photos/979247/pexels-photo-979247.jpeg",
            "large2x":"https://images.pexels.com/photos/979247/pexels-photo-979247.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
            "large":"https://images.pexels.com/photos/979247/pexels-photo-979247.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
            "medium":"https://images.pexels.com/photos/979247/pexels-photo-979247.jpeg?auto=compress&cs=tinysrgb&h=350",
            "small":"https://images.pexels.com/photos/979247/pexels-photo-979247.jpeg?auto=compress&cs=tinysrgb&h=130",
            "portrait":"https://images.pexels.com/photos/979247/pexels-photo-979247.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=1200&w=800",
            "landscape":"https://images.pexels.com/photos/979247/pexels-photo-979247.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200",
            "tiny":"https://images.pexels.com/photos/979247/pexels-photo-979247.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&h=200&w=280"
         }
      },
      {
         "id":1716530,
         "width":4016,
         "height":6016,
         "url":"https://www.pexels.com/photo/woman-in-white-top-1716530/",
         "photographer":"Anderson Miranda",
         "photographer_url":"https://www.pexels.com/@anderson-miranda-836630",
         "src":{
            "original":"https://images.pexels.com/photos/1716530/pexels-photo-1716530.jpeg",
            "large2x":"https://images.pexels.com/photos/1716530/pexels-photo-1716530.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
            "large":"https://images.pexels.com/photos/1716530/pexels-photo-1716530.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
            "medium":"https://images.pexels.com/photos/1716530/pexels-photo-1716530.jpeg?auto=compress&cs=tinysrgb&h=350",
            "small":"https://images.pexels.com/photos/1716530/pexels-photo-1716530.jpeg?auto=compress&cs=tinysrgb&h=130",
            "portrait":"https://images.pexels.com/photos/1716530/pexels-photo-1716530.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=1200&w=800",
            "landscape":"https://images.pexels.com/photos/1716530/pexels-photo-1716530.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200",
            "tiny":"https://images.pexels.com/photos/1716530/pexels-photo-1716530.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&h=200&w=280"
         }
      },
      {
         "id":1851469,
         "width":3024,
         "height":3024,
         "url":"https://www.pexels.com/photo/gray-concrete-stairs-1851469/",
         "photographer":"rawpixel.com",
         "photographer_url":"https://www.pexels.com/@rawpixel",
         "src":{
            "original":"https://images.pexels.com/photos/1851469/pexels-photo-1851469.jpeg",
            "large2x":"https://images.pexels.com/photos/1851469/pexels-photo-1851469.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
            "large":"https://images.pexels.com/photos/1851469/pexels-photo-1851469.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
            "medium":"https://images.pexels.com/photos/1851469/pexels-photo-1851469.jpeg?auto=compress&cs=tinysrgb&h=350",
            "small":"https://images.pexels.com/photos/1851469/pexels-photo-1851469.jpeg?auto=compress&cs=tinysrgb&h=130",
            "portrait":"https://images.pexels.com/photos/1851469/pexels-photo-1851469.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=1200&w=800",
            "landscape":"https://images.pexels.com/photos/1851469/pexels-photo-1851469.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200",
            "tiny":"https://images.pexels.com/photos/1851469/pexels-photo-1851469.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&h=200&w=280"
         }
      },
      {
         "id":2123573,
         "width":4445,
         "height":5421,
         "url":"https://www.pexels.com/photo/photo-of-boat-under-cloudy-sky-2123573/",
         "photographer":"Emre Kuzu",
         "photographer_url":"https://www.pexels.com/@emre-kuzu-1112138",
         "src":{
            "original":"https://images.pexels.com/photos/2123573/pexels-photo-2123573.jpeg",
            "large2x":"https://images.pexels.com/photos/2123573/pexels-photo-2123573.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
            "large":"https://images.pexels.com/photos/2123573/pexels-photo-2123573.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
            "medium":"https://images.pexels.com/photos/2123573/pexels-photo-2123573.jpeg?auto=compress&cs=tinysrgb&h=350",
            "small":"https://images.pexels.com/photos/2123573/pexels-photo-2123573.jpeg?auto=compress&cs=tinysrgb&h=130",
            "portrait":"https://images.pexels.com/photos/2123573/pexels-photo-2123573.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=1200&w=800",
            "landscape":"https://images.pexels.com/photos/2123573/pexels-photo-2123573.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200",
            "tiny":"https://images.pexels.com/photos/2123573/pexels-photo-2123573.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&h=200&w=280"
         }
      },
      {
         "id":1098460,
         "width":3000,
         "height":1870,
         "url":"https://www.pexels.com/photo/lotus-temple-1098460/",
         "photographer":"Swapnil Deshpandey",
         "photographer_url":"https://www.pexels.com/@swapnil-deshpandey-178499",
         "src":{
            "original":"https://images.pexels.com/photos/1098460/pexels-photo-1098460.jpeg",
            "large2x":"https://images.pexels.com/photos/1098460/pexels-photo-1098460.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
            "large":"https://images.pexels.com/photos/1098460/pexels-photo-1098460.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
            "medium":"https://images.pexels.com/photos/1098460/pexels-photo-1098460.jpeg?auto=compress&cs=tinysrgb&h=350",
            "small":"https://images.pexels.com/photos/1098460/pexels-photo-1098460.jpeg?auto=compress&cs=tinysrgb&h=130",
            "portrait":"https://images.pexels.com/photos/1098460/pexels-photo-1098460.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=1200&w=800",
            "landscape":"https://images.pexels.com/photos/1098460/pexels-photo-1098460.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200",
            "tiny":"https://images.pexels.com/photos/1098460/pexels-photo-1098460.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&h=200&w=280"
         }
      }
   ],
   "next_page":"https://api.pexels.com/v1/curated/?page=2&per_page=15"
}

1 個解決方案

解決方案1
 0  2019-07-15 06:57:03

您的技術是完美的……但是您所引用的URL不是有效的圖片文件……這就是為什么您看到空白的原因。 例如

  • 對於數組中的第一張照片，URL中的值是： https ://www.pexels.com/photo/white-2-storey-house-near-trees-1115804/，其解析為pexels.com上的頁面但這不是圖像；
  • 如果您查看src，您將看到可以作為<img>標簽一部分的實際圖像文件 ...此外，圖像以不同的格式顯示，例如：
    • “原版的”
    • “ large2x”
    • “大”
    • “介質”
    • “小”：
    • “肖像”
    • “景觀”
    • “小”

相關的HTML ： 

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 mt-10" *ngFor="let image of resultFromAPI?.photos">
    <mat-card>
        <img mat-card-image *ngIf="image?.url"  [src]="image.src.original" alt="" />
      <mat-card-actions>
        <button mat-icon-button color="warn" ><mat-icon aria-hidden="false" aria-label="Example home icon">favorite</mat-icon>
</button>
      </mat-card-actions>
    </mat-card>
  </div>

在這里完成工作堆疊閃電戰

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Angular 2-使用/顯示通過HTTP獲取或模擬的JSON數據 Angular 9 顯示來自嵌套 json 的數據，從 rest api 獲取 Angular 並使用來自 API 的 JSON 從 api 中獲取的 angular 樣式數據 如何映射以角度為單位從Api獲取的數據 如何以角度顯示從api獲取的數據 IONIC/Angular 不顯示來自外部 API 的 JSON 結果 離子角顯示和解析來自 API 的 JSON 數據 如何使用 API 從數據庫中獲取數組圖像並將其轉換為 JSON 數組以在 Angular 4 中以 HTML 顯示 我能夠在 Angular 8 的輸入字段中顯示從 API 獲取的數據，但在控制台中出現錯誤
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM