如何在浏览器中以原生react呈现图像

npx create-react-app image-app

cd image-app

npm install axios react-dom react-router-dom

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

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

  useEffect(() => {
    const fetchImage = async () => {
      const response = await axios.get('https://example.com/image.jpg', {
        responseType: 'arraybuffer',
      });
      const base64 = btoa(
        new Uint8Array(response.data).reduce(
          (data, byte) => data + String.fromCharCode(byte),
          ''
        )
      );
      setImageData(`data:image/jpeg;base64,${base64}`);
    };

    fetchImage();
  }, []);

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

export default Image;

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

const App = () => {
  return (
    <div>
      <h1>Image App</h1>
      <Image />
    </div>
  );
};

export default App;

npm start