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

【问题标题】：Problem with relative path when deploying react app to a subfolder in GitHub pages将反应应用程序部署到 GitHub 页面中的子文件夹时出现相对路径问题
【发布时间】：2019-04-13 11:48:35
【问题描述】：

我有一个具有这种项目结构的 React 应用程序：

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

所以我假设它会开始在根文件夹中查找，然后是图像文件夹，然后在其中找到图片。

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

但是当我构建它并将文件移动到 prod 时，图像将无法正常工作它在此路径中查找图像：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 页面中运行，但是当我在本地计算机上时，图像不会显示......

【问题讨论】：

请问您为什么不想在 JavaScript 中导入图像，即import charlie1 from './charlie1.jpg'？你有太多的图像吗？也许this 可以工作。
啊！那行得通。应该这样吗？
最好将图像导入 JavaScript 并尽可能使用导入的变量，这样 URL 将自行工作。如果您的页面的根不是/，并且您在public 目录中有资产，则you most likely have to do some extra logic in the code。

标签： reactjs

【解决方案1】：

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

import charlie1 from './charlie1.jpg';

<img src={charlie1} />

如果您的页面具有/ 以外的根目录，并且您在public 目录中有资产，您很可能必须使用some extra logic in the code。

package.json

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

App.js

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

【讨论】：