фоновое изображение угловой 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

используйте таким образом

$asset-images-path : "assets/images/imagePathHere";
background-image: image-url("#{$asset-images-path}/imageNameWithExtension.png");

Answer 2

Добавьте a / в начало каждого URL.

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

на основе вашей иерархии каталогов скорректируйте ваш относительный путь. Но добавьте косую черту в начале.

Для получения дополнительной информации см.

Answer 3

понял. Это был относительный путь без ""

так

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