angular 6 scss background image not being read

Question

In my angular 6 app I have the following in my scss file:

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

that is the correct path to the resource. yet I get this error.

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 | 

My other images that are in the assets folder are working. Very strange. Anyone know what this is?

Answer 1

Add a / to the beginning of each URL.

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

based on your directory hierarchy adjust your relative path. But add a forward slash at the beginning.

For more info refer

Answer 2

got it. It was a relative path without the ""

so

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

Answer 3

We can use relative path instead of absolute path:

$assetPath: '~src/assets/images/';
$logo-img: '#{$assetPath}logo.png';
@mixin logo {
  background-image: url(#{$logo-img});
}

.logo {
    max-width: 65px;
    @include logo;
 }

Answer 4

use in this way

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