React组件中require本地图片报错：Cannot find module

问题原因 #

webpack在编译阶段需要明确知道静态资源的路径，当你使用变量作为require的参数时，webpack无法提前解析这个路径对应的文件，因此会抛出Cannot find module错误。而在组件顶部使用静态路径require时，路径是固定的，webpack能正常定位到资源。

解决方法 #

方法1：静态导入图片后引用

提前在组件顶部导入所有需要的图片，然后在数据数组中直接使用导入后的变量：

// 组件顶部导入图片
import f1 from '../../media/female/f1.jpg';
import f2 from '../../media/female/f2.jpg';

// 定义图片数据
const userImages = [
  { id: 1, picture: f1 },
  { id: 2, picture: f2 }
];

// 渲染组件
{userImages.map((image) => (
  <Carousel.Item key={image.id}>
    <Card.Img src={image.picture} />
  </Carousel.Item>
))}

方法2：使用require.context批量导入

如果图片数量较多，可通过require.context批量导入指定目录下的图片，避免逐个导入：

// 创建图片目录上下文
const imageContext = require.context('../../media/female', false, /\.jpg$/);

// 生成文件名到图片路径的映射
const imageMap = imageContext.keys().reduce((map, key) => {
  const fileName = key.replace('./', '');
  map[fileName] = imageContext(key);
  return map;
}, {});

// 此时userImages中的picture字段应为文件名（如'f1.jpg'）
{userImages.map((image) => (
  <Carousel.Item key={image.id}>
    <Card.Img src={imageMap[image.picture]} />
  </Carousel.Item>
))}

方法3：将图片放在public目录下

把图片放到项目的public目录中，直接使用绝对路径作为src值，无需require：

// userImages中的picture字段改为绝对路径
const userImages = [
  { id: 1, picture: '/media/female/f1.jpg' }
];

// 渲染时直接赋值
{userImages.map((image) => (
  <Carousel.Item key={image.id}>
    <Card.Img src={image.picture} />
  </Carousel.Item>
))}

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