有条件地动态导入用于react的javascript中的图像

// src/assets/images/index.js
export const image1 = require('./image1.png').default;
export const image2 = require('./image2.jpg').default;

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

const MyComponent = () => {
  const [imageSrc, setImageSrc] = useState(null);

  useEffect(() => {
    const loadImage = async () => {
      // 根据条件导入所需的图像，此处以'image1'为例
      if (someCondition) {
        const { image1 } = await import('../assets/images');
        setImageSrc(image1);
      } else {
        const { image2 } = await import('../assets/images');
        setImageSrc(image2);
      }
    };

    loadImage();
  }, [someCondition]); // 如果someCondition更改，则重新运行useEffect

  return (
    <div>
      {imageSrc ? (
        <img src={imageSrc} alt="Dynamic content" />
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
};

export default MyComponent;