0

I'm using Angular 9. A scss file for a header contains:

.avatar {
...
background-image: url('assets/images/avatar.png');
...

This generates a compile error:

ERROR in ./src/app/header/user-dropdown/user-dropdown.scss

Module Error (from ./node_modules/postcss-loader/src/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: ...clientapp\user-dropdown.scss:10:2: Can't resolve './assets/images/avatar.png' in '....clientapp\src\app\header\user-dropdown'

> 10 |   background-image: url('./assets/images/avatar.png');
     |  ^

However, if I put a "/" in front of the url() argument, it compiles:

.avatar {
...
background-image: url('/assets/images/avatar-image.png');
...

But then the image does not display in production, where the location of assets is not found. (I am deploying to Github pages).

However, I can use the url() method without the "/" in all other places in my code where I set the background image programmatically. And then the image is found both locally and in production.

header.ts

backgroundStyle: any;
...
const background = "url('assets/images/some-image.png');
this.backgroundStyle = { 'background-image': background };

header.html

<mat-toolbar class="main-header" [ngStyle]="backgroundStyle">

What syntax should I use within the scss file?

John Pankowicz
  • 4,203
  • 2
  • 29
  • 47
  • 1
    does this help: https://stackoverflow.com/questions/940451/using-relative-url-in-css-file-what-location-is-it-relative-to – eamanola Mar 20 '21 at 03:39
  • @eamanola Thanks, that helped better define the problem. This other post is very similar to mine: stackoverflow.com/questions/49977681/relative-url-from-css-angular-2 Someone there also found that a relative url will work from the component file. It seems like it just won't work from the css in Angular2+. (How do I create a link in a comment?) – John Pankowicz Mar 20 '21 at 10:59

0 Answers0