React项目部署至GitHub Pages后图片无法显示的问题求助

我把React项目部署到GitHub Pages后，所有图片都加载不出来。试过把路径从../改成./、/，也把图片移到public文件夹，都没解决问题。

我试过这些图片路径写法：

<img src="src/assets/img/ramen.jpg" />
<img src="./src/assets/img/ramen.jpg" />
<img src="./public/assets/img/ramen.jpg" />
<img src="/public/assets/img/ramen.jpg" />
<img src="public/assets/img/ramen.jpg" />
<img src="assets/img/ramen.jpg" />

解决步骤 #

1. 配置项目主页路径 #

先在项目的package.json里添加homepage字段，值为你的GitHub Pages访问地址：

"homepage": "https://callmecua1.github.io/Kitsune"

这一步是关键，因为GitHub Pages的站点根路径基于仓库名，配置后React会自动处理资源路径的适配问题。

2. 正确引用public文件夹里的图片 #

如果图片放在public/assets/img/目录下，直接用根相对路径引用即可：

<img src="/assets/img/ramen.jpg" alt="拉面" />

3. src文件夹内图片的引用方式 #

如果图片在src目录下，不要直接写字符串路径，而是通过import引入后使用：

import ramenImg from './assets/img/ramen.jpg';

// 在组件中使用
<img src={ramenImg} alt="拉面" />

4. 重新部署项目 #

确保用正确的命令部署，如果你用gh-pages包，先确认package.json的scripts配置：

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

然后运行npm run deploy重新部署，等待部署完成后刷新页面查看效果。

内容的提问来源于stack exchange，提问作者josua oconner