以正确的方式显示上传到react上的express服务器上的图片

app.use(express.static('uploads'));

import React, { useState } from 'react';
import axios from 'axios';

const ImageUploadForm = () => {
  const [selectedImage, setSelectedImage] = useState(null);

  const handleImageChange = (event) => {
    setSelectedImage(event.target.files[0]);
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    const formData = new FormData();
    formData.append('image', selectedImage);

    try {
      await axios.post('/upload', formData);
      console.log('Image uploaded successfully');
    } catch (error) {
      console.error('Error uploading image', error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="file" accept="image/*" onChange={handleImageChange} />
      <button type="submit">Upload</button>
    </form>
  );
};

export default ImageUploadForm;

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const DisplayImage = () => {
  const [imageUrl, setImageUrl] = useState('');

  useEffect(() => {
    const fetchImage = async () => {
      try {
        const response = await axios.get('/image-url'); // 从Express服务器获取图片的URL
        setImageUrl(response.data.imageUrl);
      } catch (error) {
        console.error('Error fetching image URL', error);
      }
    };

    fetchImage();
  }, []);

  return <img src={imageUrl} alt="Uploaded Image" />;
};

export default DisplayImage;

app.get('/image-url', (req, res) => {
  const imageUrl = '/uploads/image.jpg'; // 替换为实际的图片路径
  res.json({ imageUrl });
});