ReactJS构建部署GitHub后无法加载作品集图片求助

我正尝试将React网站部署到GitHub Pages。执行npm run build后，用serve -s build本地运行一切正常，但部署到GitHub Pages后，作品集图片无法加载，奇怪的是项目关联的外部链接能正常访问。

相关代码 #

React组件代码 #

if(this.props.data){
    var projects = this.props.data.projects.map(function(projects){
        return <div key={projects.title} className="columns portfolio-item centreColumn">
            <div className="item-wrap">
                <a href={projects.url} target="_blank" rel="noreferrer noopener" title={projects.title}>
                    <img alt={projects.title} src={projects.image} />
                    <div className="overlay">
                        <div className="portfolio-item-meta">
                            <h5>{projects.title}</h5>
                            <p>{projects.category}</p>
                        </div>
                    </div>
                    <div className="link-icon"><i className="fa fa-link"></i></div>
                </a>
            </div>
        </div>
    })
}

JSON配置片段 #

"portfolio": {
    "projects": [
      {
        "title": "Blah",
        "category": "blah blah",
        "image": "images/myImage.png",
        "url": "https://example.com"
      }
    ]
}

环境说明 #

• 图片和相关文件存储在项目的public文件夹下，路径为public/images/myImage.png
• 已尝试的解决方法：
  • 更换不同浏览器
  • 将images子文件夹内容移至public根目录
  • 尝试使用../images/myImage.png等相对路径
  • 尝试src={require(projects.image).default}写法

1. 配置package.json的homepage字段 #

在项目根目录的package.json中添加或确认homepage字段，确保React构建时生成正确的资源路径：

"homepage": "."

该配置会让所有资源引用使用相对路径，适配GitHub Pages的部署环境。

2. 修改图片引用路径 #

利用React提供的process.env.PUBLIC_URL变量拼接图片路径，确保无论本地还是部署环境都能正确指向public文件夹下的资源：

<img alt={projects.title} src={`${process.env.PUBLIC_URL}/${projects.image}`} />

3. 验证构建产物结构 #

执行npm run build后，检查build文件夹内是否存在images目录，且目标图片已被正确复制到该目录下。React会自动将public文件夹内的所有文件同步到build根目录，若缺失则需检查public文件夹的结构是否符合规范。

4. 确认GitHub Pages部署源 #

进入GitHub仓库的设置页面，检查部署源是否指向正确的分支（如gh-pages）或main分支的/build文件夹，确保部署的是最新的构建产物。

5. 强制清除浏览器缓存 #

部署完成后，按Ctrl+Shift+R强制刷新页面，清除浏览器缓存，避免加载旧的资源文件。

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