如何在React中动态请求图像(使用GET请求获取图像)

npm install axios

npm install whatwg-fetch

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

const ImageComponent = () => {
  const [imageData, setImageData] = useState(null);

  useEffect(() => {
    const getImage = async () => {
      try {
        const response = await axios.get('https://example.com/image.jpg', {
          responseType: 'arraybuffer',
        });
        const base64Image = btoa(
          new Uint8Array(response.data).reduce(
            (data, byte) => data + String.fromCharCode(byte),
            ''
          )
        );
        setImageData(`data:${response.headers['content-type']};base64,${base64Image}`);
      } catch (error) {
        console.error('Error fetching image:', error);
      }
    };

    getImage();
  }, []);

  return (
    <div>
      {imageData && <img src={imageData} alt="Dynamic Image" />}
    </div>
  );
};

export default ImageComponent;