在react中动态加载图像作为道具

import React, { useState } from 'react';

const MyComponent = () => {
  const [image, setImage] = useState(null);
  
  // 在需要时动态加载图像
  const loadImage = async () => {
    const imageModule = await import('./path/to/image.jpg');
    setImage(imageModule.default);
  };
  
  return (
    <div>
      {/* 在需要展示图像的地方使用image变量 */}
      {image && <img src={image} alt="道具" />}
      
      {/* 触发加载图像的操作 */}
      <button onClick={loadImage}>加载图像</button>
    </div>
  );
};

export default MyComponent;