安装gh-pages部署React应用后本地运行图片无法加载如何解决

问题原因 #

问题根源是package.json中配置的homepage字段会让Create React App给所有静态资源自动添加对应子路径前缀：

• 部署到gh-pages时需要匹配仓库子路径/react-tesla-clone，配置是正确的
• 本地开发服务的根路径为/，没有该子路径，导致图片资源路径匹配错误，加载失败

解决方案 #

你可以根据自己的项目场景选择以下任意一种方案：

方案一：修改homepage为相对路径（最快捷） #

直接将package.json中的homepage字段值修改为.：

{
  "name": "react-tesla-clone",
  "homepage": ".",
  // 其余配置保持不变
}

配置后静态资源会使用相对当前HTML文件的路径加载，本地开发和gh-pages线上环境都能正常适配，无需额外修改代码。

方案二：引用public目录资源时添加PUBLIC_URL前缀 #

如果需要保留原homepage的绝对路径配置，引用public目录下的图片时，统一加上process.env.PUBLIC_URL前缀即可：

// 修改前
<img src="/images/model-3.png" alt="Model 3" />
// 修改后
<img src={`${process.env.PUBLIC_URL}/images/model-3.png`} alt="Model 3" />

Create React App会自动根据环境匹配路径前缀：开发环境下该变量为空，生产环境下自动匹配homepage配置的子路径。

方案三：通过import导入图片（推荐） #

如果图片存放在src目录下，直接在组件内通过import导入图片使用，路径会由Webpack自动处理，完全不受homepage配置影响：

// 导入图片
import model3Img from '../assets/images/model-3.png'

// 组件内使用
<img src={model3Img} alt="Model 3" />

修改配置后重启本地开发服务yarn start即可恢复图片加载，同时不会影响gh-pages线上部署效果。

内容的提问来源于stack exchange，提问作者Talat El Beick