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?

did u try removing the double quotes and make sure the path provided is relative path too `background-image: url(assets/images/profilepictureplaceholder/PersonPlaceholder.png);` — Keshan Nageswaran, Jul 04 '18 at 02:51
yes, and attempted the relative path, none are working. its really werid. — weridpotato, Jul 04 '18 at 03:01
@KeshanNageswaran got it posted the answer. Thank you for the help — weridpotato, Jul 04 '18 at 03:14
What about using `url(/assets/image......)`, I.e. with leading slash? — David, Jul 04 '18 at 05:32

score 22 · Answer 1 · edited May 04 '19 at 13:16

22

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

edited May 04 '19 at 13:16

Zoe

27,060
21
118
148

answered May 04 '19 at 04:45

leox

1,315
17
26

score 5 · Answer 2 · answered Jul 04 '18 at 03:14

5

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

so

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

answered Jul 04 '18 at 03:14

weridpotato

261
1
3
11

really? what is the syntax of `./` whats it purpose? – weridpotato Jul 04 '18 at 04:32
1

`./` is angular-cli's alias to `src` – penleychan Jul 04 '18 at 04:34

score 2 · Answer 3 · answered Jul 17 '20 at 10:20

2

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;
 }

answered Jul 17 '20 at 10:20

Aarji George

599
4
8

Best solution. Tanx Aarji ;) – Hossein Bajan Apr 09 '22 at 04:12

score 1 · Answer 4 · answered Oct 10 '18 at 10:32

1

use in this way

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

answered Oct 10 '18 at 10:32

dasunse

2,839
1
14
32

i added only url then it worked - background-image: url("#{$img-global}/sw-title-bg.png"); thanks :) – Developer Jan 14 '19 at 05:02

score 0 · Answer 5 · edited Nov 09 '20 at 02:17

0

URL might not be right:

url('/./assets/images/bike.jpg');

edited Nov 09 '20 at 02:17

Ṃųỻịgǻňạcểơửṩ

2,517
8
22
33

answered Nov 08 '20 at 22:08

Marcin Bach

51
1
2

Please add some expaination – Sabito stands with Ukraine Nov 08 '20 at 23:36
This code worked for me after migration form CSS to SCSS in Angular 10 project. – Marcin Bach Nov 10 '20 at 07:58

score 0 · Answer 6 · answered Dec 05 '20 at 10:09

0

I have tried all the above-mentioned methods but this worked for me

#imge6{
    background-image: url("../../../../assets/5.png");
    background-size: cover;
}

maybe solve someone else's problem.

answered Dec 05 '20 at 10:09

Saad Abbasi

745
11
25

angular 6 scss background image not being read

6 Answers6