Angular 4+中CSS背景图片路径引用失败，求排查原因

Hey Yogi, 咱们来拆解一下你遇到的路径错误问题：

核心错误：路径相对的基准搞反了 #

你误以为CSS里的路径是相对于HTML文件所在的文件夹，但实际上CSS中的资源路径是相对于当前CSS文件自身的位置，而不是关联的HTML文件。

咱们对照你的目录结构理清楚：

• 你的app.component.css所在位置：src/app/
• 图片所在位置：src/app/assets/images/splashImage.png

看到了吗？assets文件夹和你的CSS文件是同级目录（都在src/app/下面），根本不需要向上跳级。你之前用的../../assets相当于从src/app/往上跳两级（到src/的上一级目录），自然找不到目标文件。

正确的CSS路径写法 #

直接用同级目录的相对路径即可，两种写法都有效：

.splashContainer { 
  background: url("./assets/images/splashImage.png") no-repeat center center fixed; 
}

或者省略./（默认就是当前目录）：

.splashContainer { 
  background: url("assets/images/splashImage.png") no-repeat center center fixed; 
}

额外注意：确保自定义assets目录被Angular打包识别 #

因为标准Angular项目的assets默认是放在src/根目录下，如果你把assets放在src/app/里，需要确认angular.json的配置是否包含这个目录，否则构建时不会把图片复制到dist文件夹中：
找到projects -> [你的项目名] -> architect -> build -> options -> assets数组，添加如下配置：

"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/app/assets" // 加上这一行
]

这样调整后，你的背景图应该就能正常加载啦！

内容的提问来源于stack exchange，提问作者Yogi Bear