使用带字符串的require但使用反引号会引发错误

Question

所以我试图加载用户为他/她的个人资料保存的图像。试着使用这段代码：

const imgUrl = '../../styles/img/profpic.png';
const profImg = require(`${imgUrl}`);

然后按如下方式在render方法中加载图像：

<img src={profImg} className="" alt={key + " profile pic"} />

当不使用反引号，并将字符串放在require括号中时，它会在require调用中找到该文件，并且所有内容都运行正常并加载图像。使用反引号时，我收到以下错误：

Uncaught Error: Cannot find module '../../styles/img/profpic.png'.

知道为什么会这样吗？