角度 6 scss 背景图像未被读取

Question

在我的 angular 6 应用程序中，我的 scss 文件中有以下内容：

.pictureplaceholder{
  background-image: url("assets/images/profilepictureplaceholder/PersonPlaceholder.png");
}

这是资源的正确路径。但我收到此错误。

ERROR in ./src/app/venueadmin/parentadminview/venueuserprofile/venueuserprofile.component.scss
(Emitted value instead of an instance of Error) CssSyntaxError: /home/rickus/Documents/softwareProjects/211hospitality/suitsandtables/frontend/fixedsuitsandtables/src/app/venueadmin/parentadminview/venueuserprofile/venueuserprofile.component.scss:11:20: Can't resolve 'assets/images/profilepictureplaceholder/PersonPlaceholder.png' in '/home/rickus/Documents/softwareProjects/211hospitality/suitsandtables/frontend/fixedsuitsandtables/src/app/venueadmin/parentadminview/venueuserprofile'

   9 | 
  10 | .pictureplaceholder{
> 11 |   background-image: url('assets/images/profilepictureplaceholder/PersonPlaceholder.png');
     |                    ^
  12 | }
  13 | 

我在资产文件夹中的其他图像正在工作。很奇怪。有谁知道这是什么吗？

Answer 1

在每个 URL 的开头添加一个 /。

background-image: url("/../assets/images/profilepictureplaceholder/PersonPlaceholder.png");

根据您的目录层次结构调整您的相对路径。但是在开头添加一个正斜杠。

有关更多信息，请参阅

Answer 2

知道了。这是一个没有“”的相对路径

所以

background-image: url(../../../../assets/images/profilepictureplaceholder/PersonPlaceholder.png);