json - 从 unsplash 中提取 slug

Question

我有一张照片列表，从这个网址https://picsum.photos/v2/list获取。在此列表中，应提取 slug，例如https://unsplash.com/photos/_h7aBovKia4。这是我用的取东西

import React, {Component} from 'react';
import '../App.css';
import ImageList from "./ImageList";

class App extends Component {
  constructor() {
    super();
    this.state = {
      images: []
    };
  }

  componentDidMount() {
    fetch("https://picsum.photos/v2/list")
        .then(res => res.json())
        .then(data => {
            this.setState({ images: data });
        })
        .catch(err => {
            console.log('Error happened during fetching!', err);
        });
  }

  render() {
    return (
        <div className="container">
            <h2 className="title">Images list</h2>
            <ImageList data={this.state.images}/>
        </div>
    )
  }

}

export default App;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.production.min.js"></script>

这是 ImageList 组件

import React from "react";
import Image from "./Image";

const ImageList = props => {
    const results = props.data;
    let images = results.map(image => <Image url={image.url} key={image.id}/>);

    return (
        <ul className="img-list">{images}</ul>
    );
};

export default ImageList;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.production.min.js"></script>

我怎样才能从每个照片网址中获取那个 slug？没有它，图像不会显示在浏览器中，只是它们的 alt

UPD。图像组件

import React from "react";

const Image = props => {
    return (
        <li className="image-wrap">
            <img src={props.url} alt="Something went wrong"/>
        </li>
    )
}


export default Image;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.production.min.js"></script>

标签： jsonreactjs

Answer 1

您必须使用download_url属性，而不是url.

url指向带有评论、站点界面等的 Unsplash 页面。但是download_url，它是指向图像的直接链接。