GitHub Pages从docs目录部署后图片无法加载问题求助

DevOps 小满

2026-7-4

解决GitHub Pages部署Angular项目图片无法加载的问题

核心问题：图片引用路径不匹配部署结构

你的base href已设置为"/SindhuApp/"，且通过/docs目录部署，这意味着GitHub Pages会把/docs下的内容作为https://<你的用户名>.github.io/SindhuApp/的根目录。但你当前的图片引用路径（src/assets/xxx、docs/assets/xxx）完全不符合部署后的实际文件结构，导致图片无法被找到。

具体修正步骤

修正图片引用路径
直接使用基于base href的绝对路径，或者利用Angular的base特性使用相对路径：

<div>
<p class="Anime">
    <img src="/SindhuApp/assets/angular5.png" alt="Angular Image" style="height: 70px; width:80px;">
    <img src="/SindhuApp/assets/ts.png" alt="TS Image" style="height: 70px; width:70px"> 
    <img src="/SindhuApp/assets/html.png" alt="HTML Image" style="height: 75px; width:75px">
    <img src="/SindhuApp/assets/css.png" alt="CSS Image" style="height: 75px; width:75px">
    <img src="/SindhuApp/assets/material.png" alt="Material Image" style="height: 65px; width:70px">
</p>
</div>

相对路径写法（需确保Angular编译后路径正确）：

<img src="./assets/angular5.png" alt="Angular Image" style="height: 70px; width:80px;">

确认Angular的资源配置
打开项目根目录的angular.json，检查architect.build.options.assets，确保src/assets被配置为编译后复制到dist目录的assets文件夹：
```
"assets": [
  "src/favicon.ico",
  "src/assets"
]
```
重新编译部署
执行编译命令时指定base-href参数，保证编译后的路径匹配GitHub Pages部署路径：
```
ng build --prod --base-href "/SindhuApp/"
```
把dist目录下的所有文件复制到项目的/docs目录，提交到GitHub即可。