Javascript 为什么img path可以工作，但不能与path.join一起工作？

使用React 16.13.1，我有以下类：

从“React”导入React；
const path=require（'path'）；
类。组件{
render（）{
const vikingName=this.props.name.toLowerCase（）；//预期的“ulf”输出
返回(
//下面是img标签
)
}
}
导出默认肖像

我试图让

img

标记的

src

属性是动态的，因此当父组件调用它时，它传递viking的名称。文件目录以名称分隔

这项工作：

<img src={require('../../../../res/img/ulf/picture.png') />

<img src={require(path.join('../../../../res/img', vikingName, 'picture.png'))} />

错误：“在“../../../../res/img/ulf/picture.png”处找不到模块”

<img src={require(`../../../../res/img/${vikingName}/picture.png`)} />

错误：“在“../../../../res/img/ulf/picture.png”处找不到模块”

<img src={require(`../../../../res/img/${vikingName}/picture.png`)} />

---

---

当

this.props

正确加载时，（

this.props.name

给出预期的输出），并且所有类型都是字符串并打印正确的相同路径，为什么底部的两个不起作用？

问题不在于代码本身。问题在于Webpack如何绑定代码

Webpack捆绑您的代码和资产，并创建一个全新的文件夹结构和/或文件名

Webpack将改变如下文件夹结构：

src
 - app.jsx
 - components
 - - MyComponent.jsx
 - assets
 - - image.jpg

进入：

进口/出口的关键在于它们是静态的。Webpack将在绑定过程中更改所有幕后路径，以指向新创建的绑定路径。这就是为什么您的第一个示例工作顺利。该路径是在运行时之前定义的，所以在webpack绑定代码之前

然而

在运行时更新的动态导入指向绑定代码中不存在的路径。这就是为什么它会抛出一个无法找到您的文件的错误。因为在捆绑代码的那个位置根本没有这样的文件

幸运的是，这个问题有一个解决办法

---

如何解决这个问题： 可以使用

require.context

访问与捆绑包相关的文件路径。这允许您解析绑定路径的相对路径，并动态更新图像

---

这应该能让你走上正轨。

每天学习新东西！谢谢你详细而简洁的回答。