React组件中使用find()匹配图片路径返回undefined问题排查

问题出在哪？ #

webpack打包图片时会自动给文件名加上哈希值（比如控制台里的9ce853d8a1e419d7f38d），导致你要匹配的fe8b78fa-50f5-4061-bf09-1932fc2f0beb.png，和实际生成的路径/static/media/fe8b78fa-50f5-4061-bf09-1932fc2f0beb.9ce853d8a1e419d7f38d.png不匹配——你的目标字符串缺少中间的哈希部分，所以endsWith找不到对应项。

解决办法 #

不要直接用打包后的路径列表去匹配，而是提前建立原始文件名→打包后路径的映射表，这样就能精准匹配：

// 顶层导入时建立映射
const images = require.context('./imgs', false);
const imageMap = new Map();

images.keys().forEach(key => {
  // 提取原始文件名（比如从'./xxx.png'中拿到'xxx.png'）
  const originalFileName = key.replace('./', '');
  // 把原始文件名和打包后的路径关联起来
  imageMap.set(originalFileName, images(key));
});

// 查找时直接从映射表取
const imageItem = imageMap.get(staticImg.value.toString());

拿到imageItem后，就可以正常在<img src={imageItem} />标签中使用。

如果你的staticImg.value是文件名的前缀（不带后缀），可以调整映射的key逻辑：

const originalFileNamePrefix = key.replace('./', '').split('.png')[0];
imageMap.set(originalFileNamePrefix, images(key));

内容的提问来源于stack exchange，提问作者Mohamed Yousef Khairlden