React项目img标签动态拼接图片路径require引入报找不到模块错误

这个错误是webpack打包机制的特性导致的，和React本身逻辑无关：

• webpack打包阶段会通过静态分析收集所有依赖资源，你第一种写法里require的参数是完整写死的字符串../../uploads/1.png，webpack能直接定位到对应图片文件，把它处理成可访问的产物资源路径，运行时自然可以正常加载。
• 第二种写法里你把路径拆成../..和存在变量里的/uploads/1.png做拼接，webpack静态分析阶段拿不到变量的实际值，没法确定你要引入的文件所属的目录范围，也就没法提前把对应目录下的文件收集进打包产物，运行时查找资源就会抛出找不到模块的错误。你报错信息里的webpackEmptyContext，就是webpack因为没法确定资源范围生成的空上下文，调用时会直接抛错。

根据你的资源存放场景选对应方案即可：

1. 如果图片存放在项目src目录下，需要经过webpack打包处理：require中必须写死完整的静态目录前缀，只把动态变化的文件名/子路径放在拼接位，让webpack能明确知道要扫描哪个目录下的资源完成依赖收集。

   // 变量只存储动态变化的部分，不要把上层目录路径拆到变量中
   const imgFileName = "1.png";
   return (
     <div className='single-employee'>
       {singleEmployee && (
         <div>{avatar && <img src={require(`../../uploads/${imgFileName}`)} alt='' />}</div>
       )}
     </div>
   )
   

2. 如果图片存放在项目根目录的public文件夹下，或者是后端返回的可直接访问的静态服务/公网路径：完全不需要用require包裹，直接把路径赋值给src属性即可。

   // 路径可以是public目录下的资源访问路径，也可以是后端返回的完整http资源地址
   const path = "/uploads/1.png";
   return (
     <div className='single-employee'>
       {singleEmployee && (
         <div>{avatar && <img src={path} alt='' />}</div>
       )}
     </div>
   )
   

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