React应用部署在GitHub Pages后图片无法显示求助

算力阿峰

2026-6-25

解决React部署GitHub Pages图片不显示的问题

针对你的仓库，按以下步骤修改就能解决问题：

1. 调整package.json配置
  在项目根目录的package.json里添加homepage字段，值为你的GitHub Pages访问地址：
```
"homepage": "https://Aarif-Hussain-A-Nassar.github.io/Tungstonlabs"
```
这个字段会告诉React构建时生成正确的资源路径，适配GitHub Pages的子目录结构。
1. 修改组件内的图片引用方式
  所有引用public文件夹内图片的地方，都要用process.env.PUBLIC_URL拼接路径，比如原来的：
```
<img src="./images/tungsten-logo.png" alt="logo" />
```
改成：
```
<img src={process.env.PUBLIC_URL + '/images/tungsten-logo.png'} alt="logo" />
```
process.env.PUBLIC_URL会自动读取你设置的homepage路径，确保部署后图片请求地址是带仓库名的正确路径，而非错误的根路径请求。
1. 重新构建并部署
  执行npm run build生成最新的构建文件，再运行gh-pages -d build把build文件夹内容部署到GitHub Pages分支。