Angular自动修改CSS中background.jpg的URL路径，求原因及解决方法

原因 #

这是Angular CLI内置的CSS资源路径重写机制导致的。CLI在开发启动或构建项目时，会自动解析CSS中的资源引用，根据资源最终的输出位置和CSS文件的存放路径，自动调整引用路径以保证资源能正确加载。你的background.jpg最终输出在/assets目录下，而编译后的CSS文件位置与/assets同级，所以CLI会将相对路径./assets/background.jpg简化为background.jpg。

解决办法 #

• 使用根相对路径替代相对路径：在CSS中直接写background: url("/assets/background.jpg")（开头加斜杠，基于项目根目录），Angular CLI不会修改这种根级路径。
• 调整构建选项关闭路径优化（不推荐全局关闭，仅必要时使用）：在angular.json的build -> options中添加配置：

  "optimization": {
    "styles": {
      "minify": false,
      "inlineCritical": false
    }
  }
  

• 组件内动态绑定样式：在组件.ts文件中定义路径变量，模板中动态绑定背景图，避免CLI解析CSS路径。示例：

  // 组件.ts
  backgroundImage = 'url(./assets/background.jpg)';
  

  <!-- 组件模板 -->
  <div [style.background-image]="backgroundImage"></div>
  

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