在Angular的SCSS文件中如何引入assets文件夹下的图片作为背景图

问题原因 #

background-image CSS属性的取值要求必须用url()函数包裹图片路径，你直接传递字符串路径不符合语法规范，所以会触发报错。

解决方法 #

按照如下步骤修改即可：

1. 修正background-image的写法，用url()包裹路径
   • 如果你是在全局styles.scss中编写样式，直接用根路径写法即可，Angular构建时会自动映射src/assets目录到部署后的根路径：

   .main-content {
       height: 80vh;
       padding: 30px;
       background-image: url('/assets/adult-g3180e6c1c_1920.jpg');
       /* 可选补充配置，优化背景图显示效果 */
       background-size: cover;
       background-position: center;
       background-repeat: no-repeat;
   }
   

   • 如果你是在组件专属的scss文件中编写样式，也可以使用相对当前文件的路径写法，比如你的scss文件在src/app/xxx/目录下，就可以写：

   background-image: url('../../assets/adult-g3180e6c1c_1920.jpg');
   

   路径中../的数量根据你的文件层级调整即可。
2. 额外检查项
   • 确认图片文件确实存放在src/assets目录下，文件名的大小写和你写的路径完全匹配，Angular打包对大小写敏感。
   • 检查angular.json配置文件中projects -> 你的项目名 -> architect -> build -> options -> assets数组，确认包含"src/assets"配置，默认生成的项目都会自带该配置，如果你手动修改过需要对应调整路径。

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