Angular部署GitHub Pages出现图片资源加载404错误求助

安全阿岳

2026-5-25

解决Angular部署GitHub Pages后图片404的问题

我之前部署Angular项目到GitHub Pages时也踩过类似的静态资源路径坑，给你几个具体的排查和修复方向：

配置正确的baseHref
因为你的项目部署在GitHub Pages的子路径/resume/下，本地开发时的根路径和线上的子路径不一致，导致资源引用出错。你可以在构建时指定baseHref：
```
ng build --output-path docs --base-href "/resume/"
```
或者直接在angular.json的项目构建配置里添加：
```
"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "options": {
          "baseHref": "/resume/",
          "outputPath": "docs"
          // 其他配置...
        }
      }
    }
  }
}
```
这样Angular会自动把所有资源路径加上/resume/前缀，适配GitHub Pages的子路径环境。
检查模板中的图片引用方式
确保你在组件模板里引用图片时用的是相对路径或者Angular的assets规范写法，比如：
```
<img src="assets/images/avatar.png" alt="个人头像">
```
不要用绝对路径（比如/assets/images/avatar.png），绝对路径会从域名根目录开始查找，而你的资源实际在/resume/assets/下，自然会404。
验证assets的打包配置
打开angular.json，确认assets数组里包含了你的图片目录，确保构建时图片会被复制到docs/assets/images下：
```
"assets": [
  "src/favicon.ico",
  "src/assets"
]
```
如果你的图片放在自定义路径，也要把对应的路径加到这个数组里，避免构建时遗漏资源。
确认GitHub Pages的部署源设置
去你的GitHub仓库Settings -> Pages页面，检查部署的分支和目录是否正确：
- 分支选择你存放docs目录的分支（比如main）
- 目录选择/docs
  有时候如果选错了目录，GitHub Pages会找不到你的静态资源文件，导致404。