我正在尝试从Angular 6中的Pexel API获取图像。我正确地从API获取了响应，我可以在console.log中看到它。我在访问获取的响应的网址时遇到困难，因此我无法在网页中显示图片。
我尝试了访问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密钥。
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"
}
答案 0 :(得分：0)
您的技术是完美的……但是您所引用的URL不是有效的图片文件……这就是为什么您看到空白的原因；例如。
<img>标签的一部分...此外，图像以不同的格式显示，如：
相关的 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>