Angular中base href未附加至图片URL致生产环境图片加载失败

核心原因 #

模板或CSS中使用**绝对路径（以/开头）**引用图片时，浏览器会直接从域名根目录加载资源，忽略<base>标签的配置。

解决方案 #

1. 修正模板中的图片引用路径 #

将模板里的绝对路径改为相对路径（去掉开头的斜杠）：

• 错误写法：<img src="/assets/images/login/login-bg.png">
• 正确写法：<img src="assets/images/login/login-bg.png">

如果是绑定动态路径，确保字符串没有开头的斜杠：

<img [src]="'assets/images/login/login-bg.png'">

2. 修正CSS中的背景图路径 #

对于CSS里的背景图片，同样要避免绝对路径，根据CSS文件所在目录调整相对路径：

• 假设CSS文件在src/app/login/下，正确写法：

.login-bg {
  background-image: url('../assets/images/login/login-bg.png');
}

或者使用Angular的资源别名~（代表src目录）：

.login-bg {
  background-image: url('~assets/images/login/login-bg.png');
}

3. 确认构建命令与base标签配置 #

• 确保构建命令的--base-href参数正确（建议带引号，避免命令行解析问题）：

ng build --prod --base-href "/enrollment/"

• 构建后检查dist目录下的index.html，确认<base>标签内容为<base href="/enrollment/">，开头和结尾的斜杠都不能少。

4. 检查angular.json的资源配置 #

确认angular.json中build选项的assets数组包含src/assets，确保资源被正确复制到构建目录：

"assets": [
  "src/favicon.ico",
  "src/assets"
]

5. 清除浏览器缓存 #

生产环境可能存在缓存问题，强制刷新页面（Ctrl+F5）或在构建时添加哈希值避免缓存：

ng build --prod --base-href "/enrollment/" --output-hashing all

内容的提问来源于stack exchange，提问作者Vishnu siju