React 在部署到 gh-pages 时不显示放置在公共文件夹中的图像，但在本地主机中可以工作，为什么？

我构建了一个简单的应用程序，它呈现三张卡片，其中包含反应公共文件夹中的图像。它适用于localhost:3000但是当我试图将其部署到 GitHub 时，gh-pages 图像会损坏。似乎它没有从公共文件夹中获取图像。

我部署到 gh-pages 时遵循的步骤：

1. 在 package.json 中为主页创建了一个键值对，并在脚本部分添加了这两行

   "predeploy":"npm run build", "deploy":"gh-pages -d build",

2. npm install gh-pages --save-dev

3. 承诺并推动上述所有变更

4. npm run deploy

这 4 个步骤成功部署了我的应用程序

https://sandeep194920.github.io/CompoundComponents/ https://sandeep194920.github.io/CompoundComponents/但是，正如您所看到的，图像不会显示在本地主机中工作的图像。

让我知道我在这里犯了什么错误。谢谢。

生成的 HTML 将链接到这样的图像

<p><img alt="" src="/img/image.png" /></p>

但图像实际上会是here https://sandeep194920.github.io/CompoundComponents/images/joker.jpg.

因此，可以通过使用相对路径来避免这个问题，如果是绝对路径，那么存储库名称应该自动添加到图像 URL 之前，这是值得的。

可以尝试以下方法：

![](./img/image.svg)

![](img/image.svg)

<img src="./img/image.svg" />

<img src="img/image.svg" />

I tried it and worked for me