Angular 5 背景图片无法显示求助：首页背景图加载失败问题

别担心，我刚入门Angular的时候也踩过一模一样的坑！结合你描述的情况，咱们一步步来解决：

1. 先检查angular.json的资源配置 #

因为你的项目根目录原本没有assets文件夹，大概率是你手动创建的，这时候Angular的构建系统默认不会把这个目录当成静态资源目录。你需要修改angular.json里的assets数组，把你的assets目录加进去：

打开项目根目录下的angular.json，找到architect -> build -> options -> assets部分，修改成这样：

"assets": [
  "src/favicon.ico",
  "src/assets"  // 新增这一行，确保你的assets目录在src下
],

2. 确认CSS中的路径写法 #

根据样式文件的位置，调整背景图的路径：

• 如果是全局styles.css（在src目录下），用绝对路径或者相对路径都可以：

  body {
    background-image: url('/assets/images/bg.jpg'); /* 相对网站根目录 */
    /* 或者 background-image: url('./assets/images/bg.jpg'); 相对当前css文件 */
  }
  

• 如果是组件内部的样式文件（比如app.component.css），因为组件样式有隔离机制，需要跳出组件目录访问assets：

  .your-container {
    background-image: url('../assets/images/bg.jpg');
  }
  

  当然，直接用绝对路径url('/assets/images/bg.jpg')会更稳妥，不用纠结相对路径层级。

3. 重启Angular开发服务器 #

修改angular.json之后，必须重启ng serve！因为这个配置文件的修改不会热重载，只有重启服务器后新的资源配置才会生效。

做完这三步，你的背景图应该就能正常显示了~如果还是有问题，可以再说说你的样式文件位置或者angular.json的具体配置哦。

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