Angular 5项目中div背景图片可下载却不显示的问题排查

云原生阿岚

2026-5-19

解决Angular 5中背景图片加载但不显示的问题

我来帮你排查这个问题——资源能在Network里看到加载完成却不显示，这通常和元素尺寸或者CSS高度继承有关，咱们一步步来梳理：

先排查高度继承链是否完整
你给父级col设置了height:100%;width:100%;，但height:100%的生效前提是每一层父元素都有明确的高度值。如果你的row、body甚至html没有设置高度，那col的100%就没有参照对象，最终.start元素的高度会塌陷为0，自然看不到背景图。
你可以先给根元素和容器链补上高度：
```
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* 可选，避免出现滚动条 */
}
.row {
  height: 100%;
}
```
这样整个容器链的高度就从根元素传递到.start，元素有了高度，背景图就能显示了。
临时测试：给.start设置固定高度
你可以先给.start加个固定高度（比如min-height: 400px）验证一下：
```
.start {
  background: #222 url('/assets/images/Untitled-1.png') center center no-repeat;
  color: white;
  height: 100%;
  min-height: 400px; /* 临时添加 */
  text-align: center;
}
```
如果图片能显示，就坐实了是高度继承的问题，再回头完善高度链即可。
其他备选排查点
虽然Network显示图片已加载，但可以偶尔验证下路径写法：如果你的组件CSS文件在组件目录下，试试相对路径../assets/images/Untitled-1.png（不过绝对路径在Angular CLI里通常是没问题的）；另外也可以把background简写拆成单独属性写，排除简写顺序的潜在问题：
```
.start {
  background-color: #222;
  background-image: url('/assets/images/Untitled-1.png');
  background-position: center center;
  background-repeat: no-repeat;
  color: white;
  height: 100%;
  text-align: center;
}
```