React / Next.js更改图像源onLoad

import React, { useState } from 'react';

const ImageComponent = () => {
  const [imageLoaded, setImageLoaded] = useState(false);

  const handleImageLoad = () => {
    // 图像加载完成后执行的操作
    setImageLoaded(true);
    console.log('图像加载完成');
  };

  const changeImageSource = () => {
    // 更改图像源
    const newImageSource = 'https://example.com/new-image.jpg';
    setImageLoaded(false);
    // 更新图像源
    document.getElementById('image').src = newImageSource;
  };

  return (
    <div>
      <img id="image" src="https://example.com/image.jpg" onLoad={handleImageLoad} />
      {imageLoaded && <p>图像加载完成</p>}
      <button onClick={changeImageSource}>更改图像源</button>
    </div>
  );
};

export default ImageComponent;