使用模板字符串传入require加载头像报错，直接传字符串正常

这个问题本质是打包工具（比如Webpack）的静态分析机制导致的——当你用纯字符串写require('../../styles/img/profpic.png')时，打包工具能在编译阶段就明确找到这个文件的位置并打包；但用模板字符串拼接路径时，路径变成了动态值，打包工具没法提前解析这个路径对应的文件，自然就会报错。

给你几个可行的解决思路：

1. 保留静态路径（最简单的方案） #

如果路径不需要动态变化，直接写死静态字符串就行，你已经验证过这个方法是有效的：

const profImg = require('../../styles/img/profpic.png');

2. 拆分固定路径与动态部分 #

如果确实需要动态生成路径，要把固定的基础路径直接写在require里，只把动态变化的部分用变量拼接。打包工具能识别固定的基础路径，会提前把该目录下的相关文件都打包进来，运行时再匹配动态部分：

// 示例1：动态文件名
const imgFileName = 'profpic';
const profImg = require(`../../styles/img/${imgFileName}.png`);

// 示例2：动态子目录（如果有的话）
const subDir = 'img';
const profImg = require(`../../styles/${subDir}/profpic.png`);

3. 使用require.context批量管理图片 #

如果你的场景是需要加载目录下的多张图片，推荐用require.context创建一个上下文，统一管理图片资源，这样更灵活：

// 第一个参数是图片目录，第二个参数是否遍历子目录，第三个参数是匹配文件的正则
const imgContext = require.context('../../styles/img/', false, /\.png$/);

// 通过相对路径获取图片
const profImg = imgContext('./profpic.png');

// 如果是循环加载多个头像，还可以这样用：
// const avatarKeys = ['user1', 'user2'];
// avatarKeys.forEach(key => {
//   const img = imgContext(`./${key}profpic.png`);
//   // 后续处理逻辑
// });

额外注意点 #

• 确认相对路径的正确性：路径是相对于当前组件文件的位置，不是项目根目录，别搞错层级。
• 如果用的是Create React App这类封装好的脚手架，底层也是Webpack，上述方案都适用。

内容的提问来源于stack exchange，提问作者Jorge Rodríguez González