当部署到 gh-pages 时，React 不显示放置在公共文件夹中的图像，但在本地主机上工作

Question

我构建了一个简单的应用程序，它呈现三张卡片，这些卡片包含 React 的公共文件夹中的图像。它可以工作，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/但是，如您所见，图像不会显示在本地主机中。

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

Answer 1

生成的 HTML 将像这样链接到图像<p><img alt="" src="/img/image.png" /></p>但图像实际上会在这里。所以这个问题可以通过使用相对路径来避免，如果它是一个绝对路径，那么如果存储库名称应该自动添加到图像 URL 之前是值得的。可以尝试以下方法：<img src="./img/image.svg" /><img src="img/image.svg" />我试过了，为我工作