React 在部署到 gh-pages 時不顯示放置在公共文件夾中的圖像，但可以在本地主機中運行，為什么？

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/image.svg)

![](img/image.svg)

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

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

我試過了並為我工作