React中动态import/require图片失败，仅硬编码字符串生效问题求助

问题背景 #

需要实现React组件动态加载src/images下的图片，避免手动编写大量import语句。props.item.imageSource是与硬编码完全一致的相对路径，但动态导入（不管用import()还是require()）都会提示“Cannot find module”，只有硬编码路径能正常工作。

动态导入失败代码示例 #

function MenuItemCard(props) {
  const [importedImage, setImportedImage] = useState(null);

  useEffect(() => {
    import("" + props.item.imageSource).then((image) =>
      setImportedImage(image.default)
    );
  }, []);

  return (
    <div className="menuItemCard">
      {importedImage && <img src={importedImage} />}
    </div>
  );
}

硬编码路径正常工作示例 #

function MenuItemCard(props) {
  const [importedImage, setImportedImage] = useState(null);

  useEffect(() => {
    import("../../images/burgers/burger-1.png").then((image) =>
      setImportedImage(image.default)
    );
  }, []);

  return (
    <div className="menuItemCard">
      {importedImage && <img src={importedImage} />}
    </div>
  );
}

require()也存在同样问题：变量路径报错，硬编码路径正常。

问题原因 #

Webpack等打包工具在编译阶段需要明确知道要打包哪些资源，动态变量路径无法让工具提前扫描并打包对应的图片资源，因此运行时会找不到模块。

解决方案 #

方案1：用Webpack的require.context预加载所有图片 #

在组件文件或单独工具文件中创建图片上下文，提前加载所有目标图片：

// 预加载src/images下所有png图片，可按需调整匹配规则
const images = require.context('../../images', true, /\.png$/);

然后在组件中通过路径直接获取图片：

function MenuItemCard(props) {
  const imageSrc = images(props.item.imageSource);

  return (
    <div className="menuItemCard">
      <img src={imageSrc} />
    </div>
  );
}

require.context参数说明：

• 第一个参数：要搜索的根目录
• 第二个参数：是否递归搜索子目录
• 第三个参数：匹配文件的正则表达式

方案2：将图片放到public目录，用绝对路径引用 #

把图片移动到项目根目录的public/images下，直接使用绝对路径加载：

function MenuItemCard(props) {
  // 假设props.item.imageSource是"burgers/burger-1.png"
  const imageSrc = `/images/${props.item.imageSource}`;

  return (
    <div className="menuItemCard">
      <img src={imageSrc} />
    </div>
  );
}

这种方式无需import或require，Webpack不会处理public目录下的资源，运行时直接从静态资源路径加载。

方案3：Vite构建项目用import.meta.glob #

Vite支持用import.meta.glob批量同步导入资源：

// 预加载所有png图片，eager设为true表示同步加载
const images = import.meta.glob('../../images/**/*.png', { eager: true });

function MenuItemCard(props) {
  const imageModule = images[props.item.imageSource];
  const imageSrc = imageModule.default;

  return (
    <div className="menuItemCard">
      <img src={imageSrc} />
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Daniel .S