将React App部署到GitHub页面中的子文件夹时的相对路径问题

Question

我有一个与这个项目结构的反应应用程序：

在我的Home组件和About组件中，我有两个图像，其中src设置为： <img src="/img/charlie1.jpg" alt="charlie home pic" />和<img src="/img/charlie2.jpg" alt="charlie about pic" />

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

当我在本地计算机上进行开发时，此方法工作正常。图像将正确显示。

但是，当我建立它和移动文件督促图像将不能工作，寻找图像在此路径： https://xyz.github.io/img/charlie2.jpg而不是https://xyz.github.io/charlieReact/img/charlie2.jpg

我该如何解决这个问题？

如果我将图像src更改为： <img src="./img/charlie1.jpg" alt="charlie home pic" />

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

Answer 1

将图像导入JavaScript并尽可能使用导入的变量是个好主意，而URL只能自己工作。

import charlie1 from './charlie1.jpg';

<img src={charlie1} />

如果页面的根不是/并且在public目录中有资产，则很可能必须在代码中做一些额外的逻辑 。

的package.json

{
  "homepage": "https://xyz.github.io/charlieReact"
}

App.js

<img src={`${process.env.PUBLIC_URL}/img/charlie1.jpg`} />