React动态加载图片路径问题求助：映射渲染时无法加载图片

问题背景 #

静态加载图片完全正常：

src={require('../../assets/user-images/image-anne.jpg')}

但通过props传入格式为'./assets/user-image/image-anne.jpg'的路径动态加载时，尝试src={require(../.${image})}报错Cannot find module './../assets/user-images/image-anne.jpg'，直接使用{image}也无法定位到src下的assets目录。组件位于src/components/feedbackList，图片存储在src/assets/user-images，直接访问/assets会提示超出src目录。

可行解决方向 #

1. 固定基础路径，动态传递文件名 #

Webpack对动态require的支持要求保留固定的基础路径（编译时可识别的范围），因此建议调整props传递的内容为图片文件名（如image-anne.jpg），然后使用固定基础路径拼接：

// 假设props传入的image是文件名
src={require(`../../assets/user-images/${image}`)}

如果必须传入完整路径片段，可对路径做替换处理，修正相对组件的路径：

// 把props中的./assets替换为相对于组件的../../assets
const fixedPath = image.replace('./assets', '../../assets');
src={require(fixedPath)}

2. 将图片移至public目录 #

把图片放到项目根目录的public/assets/user-images下，即可直接使用绝对路径访问，无需require：

// 假设props传入的是文件名image-anne.jpg
src={`/assets/user-images/${image}`}

public目录下的资源会被直接复制到构建产物的根目录，浏览器可直接通过绝对路径访问，避开Webpack的模块解析限制。

3. 提前导入图片并创建映射表 #

如果图片数量有限，可提前导入所有需要的图片，通过映射表匹配使用：

// 提前导入所有图片
import anneImg from '../../assets/user-images/image-anne.jpg';
// 导入其他需要的图片...

// 创建文件名到图片模块的映射
const imageMap = {
  'image-anne.jpg': anneImg,
  // 添加其他图片映射...
};

// 组件中通过props传入的文件名获取图片
src={imageMap[image]}

这种方式让Webpack在编译时就能处理所有图片，完全避免动态路径解析问题，稳定性最高。

原因说明 #

Webpack的require是静态分析机制，编译时需要确定文件的查找范围，全动态的路径（如require(完全变量)）会导致Webpack无法定位模块，因此必须保留固定的基础路径部分，仅动态替换可变的文件名或路径片段。

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