React.js使用props传参作为require路径无法加载图片问题问询

错误原因 #

require 是编译阶段执行的静态资源解析语法，打包工具无法识别运行时才确定的完整变量路径，你直接将props.image整体作为参数传入require，会导致打包阶段无法匹配到对应资源，因此报错。

解决方法 #

你需要将路径的固定前缀写死，只把动态部分作为变量拼接：

1. 先调整你JSON文件中存储的路径格式，只保留文件名+后缀，比如原来存的./abc.jpg改成abc.jpg
2. 改写组件代码：

<Card.Img style={imgStyle} variant="top" src={require(`./${props.image}`).default}  />

如果你的图片存放在其他固定目录，替换掉前缀的固定路径即可。

其他适配场景 #

• 如果你使用Vite构建项目，不要使用require，改用以下写法：

<Card.Img style={imgStyle} variant="top" src={new URL(`./${props.image}`, import.meta.url).href}  />

• 如果你项目中的图片数量不多，可以提前集中定义图片映射表，兼容性最好：

// 提前引入所有需要用到的图片
const imageMap = {
  "abc.jpg": require("./abc.jpg").default,
  "def.jpg": require("./def.jpg").default
}

// 组件内直接通过key取值
<Card.Img style={imgStyle} variant="top" src={imageMap[props.image]}  />

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