React图片引入疑问：为何模板字符串传入require无法生效？

为什么会失效？ #

React项目通常用webpack打包，webpack是在构建阶段处理资源引用的：

• 当你写require("../images/profile/mehraboon.jpg")这种静态路径时，webpack能直接识别到对应文件，会把图片复制到打包后的资源文件夹，同时把require的返回值替换成打包后的图片URL，所以能正常显示。
• 但用require(${person.image})这种动态字符串时，webpack在构建阶段根本无法确定这个字符串的最终值（因为它是运行时才生成的），所以不会处理这个路径对应的图片，运行时自然找不到资源，也就显示不出来。

解决办法 #

办法1：提前预加载所有需要的图片 #

把要用的图片都用require提前引入，存在一个映射对象里，之后通过person.image的路径去取对应的资源：

// 预定义所有可能用到的图片映射
const imageMap = {
  "../images/profile/mehraboon.jpg": require("../images/profile/mehraboon.jpg"),
  // 其他需要的图片也可以加在这里
};

// 渲染图片时使用
<img src={imageMap[person.image]} alt="个人头像" />

办法2：将图片放到public目录下 #

如果把图片放在项目的public文件夹里（比如public/images/profile/mehraboon.jpg），就不需要用require，直接用相对路径作为src：

// 注意此时person.image的值要改为相对于public的路径，比如"/images/profile/mehraboon.jpg"
<img src={person.image} alt="个人头像" />

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