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

Question

我构建了一个简单的应用程序，该应用程序渲染包含反应图像的公用文件夹中图像的三张卡片。它可以在localhost:3000中工作，但是当我试图将其部署到GitHub时，gh页会损坏图像。看来它不是从公用文件夹中获取图像。

我按照步骤部署到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>

但是图像实际上是here。

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

可以尝试以下方法：

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

![](img/image.svg)

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

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

我尝试过并为我工作