React项目部署GitHub后本地localhost图片无法显示问题求助

原因分析 #

GitHub Pages部署时会自动适配仓库的子路径，而本地开发服务器的根路径是项目的public文件夹，直接写相对路径或绝对根路径容易出现路径不匹配的情况。

具体解决方法 #

方法1：使用process.env.PUBLIC_URL（适用于存放在public文件夹的图片） #

如果你的图片放在项目根目录的public/images下，在组件中这样引用：

<img src={process.env.PUBLIC_URL + '/images/image.jpg'} alt="示例图片" />

• 本地开发时，process.env.PUBLIC_URL为空，路径会解析为/images/image.jpg，对应public/images下的文件；
• 部署到GitHub Pages时，React会自动将process.env.PUBLIC_URL替换为你的仓库路径（比如/repo-name），路径变为/repo-name/images/image.jpg，和GitHub Pages的部署结构匹配。

方法2：import引入图片（适用于存放在src文件夹的图片） #

如果图片放在src/images下，先在组件中import图片资源：

import MyImage from '../images/image.jpg'; // 根据组件所在路径调整相对路径

// 然后在img标签中使用
<img src={MyImage} alt="示例图片" />

Webpack在构建时会自动处理图片路径，生成本地和部署环境都能识别的地址，避免路径问题。

检查package.json的homepage字段 #

如果你的项目在package.json中设置了homepage（比如"homepage": "https://your-username.github.io/your-repo"），不要直接写绝对根路径/images/image.jpg，因为本地开发时会默认加上homepage的前缀，导致路径错误。用上面两种方法可以自动适配这个字段。

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