部署Angular应用到子域名时资源URL前缀缺失问题求助

方法1：使用相对路径（最直接） #

把SCSS中路径开头的斜杠去掉，改成相对路径写法：

.landing-page {
  height: 100%;
  background: url('./assets/images/Landing_page.jpg') center center no-repeat;
  background-size: cover;
}

或者更简洁的写法（编译后的CSS文件与index.html在同一目录，相对路径会自动基于<base href='./'>解析）：

.landing-page {
  height: 100%;
  background: url('assets/images/Landing_page.jpg') center center no-repeat;
  background-size: cover;
}

修改后路径会自动补全子域名前缀/my-app/，正确指向host.com/my-app/assets/images/Landing_page.jpg。

方法2：动态绑定base href到样式（适配动态配置场景） #

如果base href需要根据环境动态调整，可以通过Angular的DOCUMENT服务获取当前base路径，再绑定到元素样式：

1. 在组件中注入DOCUMENT并获取base路径：

import { Component, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Component({
  selector: 'app-landing',
  templateUrl: './landing.component.html',
  styleUrls: ['./landing.component.scss']
})
export class LandingComponent {
  baseUrl: string;

  constructor(@Inject(DOCUMENT) private document: Document) {
    this.baseUrl = this.document.baseURI;
  }
}

2. 在组件HTML模板中用属性绑定设置背景图：

<div class="landing-page" [style.background-image]="'url(' + baseUrl + 'assets/images/Landing_page.jpg)'"></div>

这种方式会自动匹配当前部署的base路径，确保图片请求地址正确。

方法3：通过环境变量配置（多环境部署适配） #

在environment.ts中添加base路径配置：

export const environment = {
  production: false,
  baseHref: '/my-app/'
};

然后在组件中引入环境变量，动态生成背景图路径：

import { environment } from '../../environments/environment';

// 在组件类中定义样式变量
bgImageUrl = `url(${environment.baseHref}assets/images/Landing_page.jpg)`;

最后在模板中绑定：

<div class="landing-page" [style.background-image]="bgImageUrl"></div>

生产环境部署时，只需修改environment.prod.ts中的baseHref即可，无需改动SCSS代码。

内容的提问来源于stack exchange，提问作者Haoyin Ni