React中能否使用导入对象的字符串作为图片资源路径？

嘿，我来帮你解决这个React图片导入的问题～

首先，先说说你遇到的「text is not defined」错误：既然你已经导入了包含嵌套对象的text模块，那大概率是webpack对动态require的静态分析限制导致的，而不是真的text没定义——因为当你用require(../img/${text.contact.photo})这种动态字符串时，webpack在打包阶段没法提前解析出text.contact.photo的具体值，也就没法确定要打包哪些图片，甚至可能误判变量作用域。

然后回到你的核心问题：能不能通过未预先导入的图片对应的键值作为资源路径？答案是可以的，但需要用webpack的require.context来帮你明确资源范围，具体做法如下：

解决方案步骤 #

• 第一步：定义图片上下文，告诉webpack要打包指定目录下的所有图片
  在组件文件里先添加这段代码：

  // 匹配../img目录下所有jpg/png/svg格式的图片，不递归子目录
  const imageContext = require.context('../img', false, /\.(jpg|png|svg)$/);
  

  这里的三个参数分别是：资源目录、是否递归子目录、匹配文件的正则表达式，你可以根据自己的图片格式调整正则。

• 第二步：通过text模块里的键值获取图片路径
  假设text.contact.photo的值是图片的文件名（比如"profilephoto.jpg"），直接用上下文的方法调用即可：

  <img src={imageContext(`./${text.contact.photo}`)} alt="Profile" />
  

为什么这样可行？ #

require.context会让webpack把指定目录下符合规则的所有图片都提前打包进项目，然后你就可以通过文件名（也就是你text模块里的键值）动态获取对应的图片资源路径，完美解决了动态require时webpack无法静态分析的问题。

另外要注意：确保text.contact.photo的取值确实是../img目录下存在的文件名（包括后缀），否则会找不到对应的资源哦～

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