Question

我有一个Flask后端API，可以在线返回图片链接，例如

@app.route('/api/pic')
def pic():
    ......
    return jsonify({"pic": "https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png"

我想做的就是用reactjs渲染这张图片的页面。但是，我未能将其与我的前端集成。有人可以提供一个最小的工作示例来帮助我吗？

Answer 1

下面是一个示例，假设您将在现实世界中使用fetch()：

import React from "react";
import ReactDOM from "react-dom";

const fakeAPI = val => {
  return new Promise(res => {
    setTimeout(res.bind(null, val), 2000);
  });
};

const fakeFetch = () => {
  return fakeAPI("https://via.placeholder.com/350x150");
};

class App extends React.Component {
  state = {
    image: "",
    loading: true
  };

  componentDidMount() {
    fakeFetch().then(image => {
      this.setState({ image, loading: false });
    });
  }

  render() {
    if (this.state.loading) {
      return <h1>loading</h1>;
    }

    return <img src={this.state.image} />;
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

工作示例here。

在React with Flask中显示图片

1 个答案: