как отрисовать изображение от nodejs, чтобы отреагировать js, используя axios - PullRequest
Новая
       20

как отрисовать изображение от nodejs, чтобы отреагировать js, используя axios

0 голосов
/ 30 апреля 2020 
import React, { Component } from "react";

import axios from "axios";

import "./getForm.css";

class GetData extends Component {
  state = { posts: [] };

  componentDidMount() {
    axios
      .get("http://localhost:8888/api/v1/user") //returns promise
      .then((response) => {
        this.setState({ posts: response.data });
        console.log("response:", response.data);
      })
      .catch((err) => {
        console.log("err:", err);
      });
  }
  render() {
    return (
      <>
        <h1>Posts</h1>
        <table>
          <tbody>
            <tr>
              <th>id</th>
              <th>name</th>
              <th>email</th>

              <th>mobile</th>
              <th>status</th>
            </tr>
            {this.state.posts.map((post) => {
              return (
                <tr key={post.id}>
                  <td>{post.id}</td>

                  <td> {post.name}</td>
                  <td> {post.email}</td>

                  <td> {post.mobile}</td>
                  <td>
                    <img src={post.image} />
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </>
    );
  }
}

export default GetData;

Ответы [ 2 ]

0 голосов
/ 30 апреля 2020

Вы можете добавить маршруты для ваших фотографий в папку Node.js publi c: 

...
app.use('/photos', express.static(__dirname + '/public/photos'));
...

Затем вернуть image_url из http://localhost: 8888 / api / v1 / user URL может быть как http://localhost: 8888 / api / v1 / photos / your_image_name.jpg

В вашем React: 

...
<img style={{width:500, height:500}} src={post.image_url)} />
...
0 голосов
/ 30 апреля 2020

Примечание: Предполагается, что у вас есть image URL-адреса в ответе вашего сервера.

Состояние posts отображается перед тем, как вы получите ответ от вашего сервера при первоначальном рендеринге. , Вы можете добавить состояние loading, которое изначально установлено на true, а после того, как response.data установлено в состояние posts, вы можете установить для loading значение false.

Затем можно условно отобразить весь компонент на основе этого состояния loading следующим образом.

Вот ссылка на работающую песочницу . 

import React, { Component } from "react";

import axios from "axios";

class GetData extends Component {
  state = { posts: [], loading: true };

  componentDidMount() {
    this.fetchUserData();
  }

  fetchUserData = async () => {
    try {
      const response = await axios.get("http://localhost:8888/api/v1/user");
      this.setState({ posts: response.data, loading: false });
      console.log(response.data);
    } catch (error) {
      this.setState({ loading: false });
      console.log(error);
    }
  };

  render() {
    if (this.state.loading) {
      return "Loading";
    }

    return (
      <>
        <h1>Posts</h1>
        <table>
          <tbody>
            <tr>
              <th>id</th>
              <th>name</th>
              <th>email</th>

              <th>mobile</th>
              <th>status</th>
            </tr>
            {this.state.posts.map((post) => {
              return (
                <tr key={post.id}>
                  <td>{post.id}</td>

                  <td> {post.name}</td>
                  <td> {post.email}</td>
                  <td> {post.mobile}</td>
                  <td>
                    <img src={post.image} />
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </>
    );
  }
}

export default GetData;
...