React Vite中通过Props接收图片遇require未定义问题求解决方法

Vite基于ES模块规范，不支持CommonJS的require语法，所以你之前在CRA里的写法会报错。下面是几种可行的替代实现方式：

方案1：用import.meta.glob批量预加载图片 #

适合图片数量固定的场景，提前把所有目标图片导入并生成映射表，再通过Props参数匹配：

// 批量导入Media目录下的所有jpg图片
const imageMap = Object.fromEntries(
  Object.entries(import.meta.glob('../Media/*.jpg', { eager: true }))
    .map(([key, value]) => {
      // 提取不带后缀的文件名作为映射键
      const fileName = key.split('/').pop().replace('.jpg', '');
      return [fileName, value.default];
    })
);

function YourImageComponent({ imagen, textoImagen }) {
  return <img src={imageMap[imagen]} alt={textoImagen} />;
}

• 说明：import.meta.glob是Vite内置的资源批量导入语法，eager: true表示同步加载所有匹配文件，每个模块的default属性就是图片的最终URL。

方案2：动态import异步加载图片 #

如果图片数量较多或不需要预加载，可以用异步import实现，注意处理加载状态：

import { useState, useEffect } from 'react';

function YourImageComponent({ imagen, textoImagen }) {
  const [imageUrl, setImageUrl] = useState(null);

  useEffect(() => {
    const loadTargetImage = async () => {
      try {
        const imageModule = await import(`../Media/${imagen}.jpg`);
        setImageUrl(imageModule.default);
      } catch (err) {
        console.error('图片加载失败:', err);
        // 可选：加载失败时设置默认图
        setImageUrl('../Media/default.jpg');
      }
    };

    loadTargetImage();
  }, [imagen]);

  // 加载中显示占位内容
  if (!imageUrl) return <div>图片加载中...</div>;

  return <img src={imageUrl} alt={textoImagen} />;
}

方案3：将图片放入public目录直接拼接路径 #

如果把图片移到项目根目录的public/Media文件夹下，可以直接通过字符串拼接路径访问，无需导入：

function YourImageComponent({ imagen, textoImagen }) {
  return <img src={`/Media/${imagen}.jpg`} alt={textoImagen} />;
}

• 注意：public目录下的资源会被原样打包到dist目录，路径必须以/开头，对应项目根路径。

内容的提问来源于stack exchange，提问作者Aldebaran