使用Parcel构建的React项目部署GitHub Pages后图片无法加载求助

• 调整图片引用方式：别用绝对路径/img/vector-4.svg，改成相对路径或者通过import引入：

  • 相对路径写法：<img alt="Vector" src="./img/vector-4.svg" />
  • React import写法：

    import VectorImg from './img/vector-4.svg';
    // 组件内使用
    <img alt="Vector" src={VectorImg} />
    

    这种方式Parcel会在构建时自动处理图片路径，从根源避免路径错误。

• 修正public-url参数：执行构建命令时，用相对路径参数更稳妥：

  parcel build --public-url ./
  

  若确定子路径是my-newsite，也可以用：

  parcel build --public-url /my-newsite/
  

  注意不要带standly.github.io，GitHub Pages会自动处理域名部分。

• 检查部署内容：确保GitHub Pages部署的是Parcel构建生成的dist文件夹里的全部内容，在仓库的Pages设置中，确认部署分支（比如gh-pages）或目录（main分支的dist文件夹）选择正确。

• 验证构建结果：构建完成后打开dist文件夹内的HTML文件，查看图片的src属性是否正确，比如是否变成./img/vector-4.svg或/my-newsite/img/vector-4.svg，若路径不对则重新调整参数和引用方式。

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