Reactjs 将react应用程序部署到GitHub页面中的子文件夹时出现相对路径问题

我有一个具有此项目结构的react应用程序：

在我的主页组件和关于组件中，我有两个图像 src设置为：

和

因此，我假设它将开始在根文件夹中查找，然后在图像文件夹中查找，然后在其中找到图片

当我在本地机器上开发时，这很好用 图像将正确显示

但是，当我构建它并移动文件以生成图像时，图像将无法工作 它在以下路径中查找图像：

https://xyz.github.io/img/charlie2.jpg

而不是

https://xyz.github.io/charlieReact/img/charlie2.jpg

我如何解决这个问题

如果我将图像src更改为：

然后它在github页面中工作，但是当我在本地机器上时，图像将不会显示…

---

最好将图像导入JavaScript并尽可能使用导入的变量，URL将自行工作

从“/charlie1.jpg”导入charlie1；

如果您的页面有一个非

/

的根目录，并且您在

public

目录中有资产，那么您很可能必须这样做

package.json

{
“主页”：https://xyz.github.io/charlieReact"
}

App.js

请问您为什么不想在JavaScript中导入图像，即从“/charlie1.jpg”导入charlie1？你有太多的图片吗？也许可以。啊！成功了。应该这样做吗？最好将图像导入JavaScript并尽可能使用导入的变量，URL将自行工作。如果您的页面的根目录不是

/

，并且您在

public

目录中有资产。