如何在react惰性回退中使用图像

import React, { useState, useEffect } from 'react';
import LazyLoad from 'react-lazyload';

const ImageComponent = ({ src, alt }) => {
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    const image = new Image();
    image.src = src;
    image.onload = () => {
      setIsLoaded(true);
    };
  }, [src]);

  return (
    <LazyLoad once>
      {isLoaded ? (
        <img src={src} alt={alt} />
      ) : (
        <div>Loading...</div>
      )}
    </LazyLoad>
  );
};

const App = () => {
  return (
    <div>
      <h1>Lazy Loading Images in React</h1>
      <ImageComponent
        src="path/to/image.jpg"
        alt="Image"
      />
    </div>
  );
};