Angular 10: not able to use an image from assets in url() in scss files

[destus90]

🐞 Bug report

Command (mark with an x)

• [ ] new
• [ ] build
• [x] serve
• [ ] test
• [ ] e2e
• [ ] generate
• [ ] add
• [ ] update
• [ ] lint
• [ ] xi18n
• [ ] run
• [ ] config
• [ ] help
• [ ] version
• [ ] doc

Is this a regression?

Yes, the previous version in which this bug was not present was: 9 ### Description There is no way to use an image from the assets folder with Angular 10. It works fine with v.9. Using the path as absolute `/assets/logo.png` resolves the issue, but it would not work with the base-href option. ## 🔬 Minimal Reproduction 1. Clone it and try to run `ng serve` command. https://github.com/destus90/angular10-postcss-issue

🔥 Exception or Error

ERROR in ./src/app/app.component.scss
Module Error (from ./node_modules/postcss-loader/src/index.js):
Can't resolve './assets/logo.png'

🌍 Your Environment

Angular CLI: 10.0.0
Node: 14.2.0
OS: win32 x64

Angular: 10.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.0
@angular-devkit/build-angular     0.1000.0
@angular-devkit/build-optimizer   0.1000.0
@angular-devkit/build-webpack     0.1000.0
@angular-devkit/core              10.0.0
@angular-devkit/schematics        10.0.0
@ngtools/webpack                  10.0.0
@schematics/angular               10.0.0
@schematics/update                0.1000.0
rxjs                              6.5.5
typescript                        3.9.5
webpack                           4.43.0

Anything else relevant?

[destus90]

The workaround https://github.com/angular/angular-cli/issues/12797#issuecomment-598534241 fixes the issue. Is it the right way?

[alan-agius4]

Hi @destus90, this is caused by a long outstanding issue which was solved in version 10. See: https://github.com/angular/angular-cli/pull/17537 for more context.

Regarding the "solution" in https://github.com/angular/angular-cli/issues/12797#issuecomment-598534241, paths starting with ^ is a Webpack specific feature and as such we don't provide support nor guarantee that these will continue to work in the future.

In your case to solve the issue, you need to update the image path to be relative from the SCSS file. Ie: url("assets/logo.png") to url("../assets/logo.png").

[destus90]

@alan-agius4 indeed this works. At the moment, should we put our images, which are used in scss file, in the same folder as this file, in order to avoid the cumbersome statements like '../../../../assets/image.png' ? I found out that this behavior doesn't happen if you use an image in a component's template.

<a routerLink="/" src="assets/logo.png">Home</a>

works with no errors.

[alan-agius4]

Unlike images in CSS which are resolved during build time, copied and hashed out-of-the-box, images in templates are not processed by the build pipleine, and it's up to the developer to copy them and make sure they are in the distributable folder.

should we put our images, which are used in scss file, in the same folder as this file, in order to avoid the cumbersome statements like '../../../../assets/image.png'

It's up to you really!

[sagrawal31]

Drafted a question & two possible answers here https://stackoverflow.com/questions/62619062/unable-to-use-assets-in-url-in-scss-after-upgrading-to-angular-10/62619147#62619147.

[destus90]

@sagrawal31 Solution 2 is good, but as @alan-agius4 described above, this functionality can be dropped in the future. So, it would be very dangerous to rely on this behavior.

[sagrawal31]

Thanks @destus90 for giving an update to this. I'll mark it accordingly in my answer. Also, I have added a solution 3. Please check that out.

[destus90]

@sagrawal31 I prefer the first solution. The second solution will not work on production when using --base-href option during the build https://github.com/angular/angular-cli/issues/18043#issuecomment-651124980 . The CLI doesn't prepend the --base-href path for assets in the bunled file.

[sagrawal31]

Thanks again @destus90. I just updated my answer and added more detail. I'll add your point as well.

[sagrawal31]

Updated my answer @destus90

[nasreddineskandrani]

@sagrawal31 @destus90 You can use the solution 2 (url('/assets/PATH_TO_IMAGE') mentionned in one answer from your stackoverflow link -> https://stackoverflow.com/questions/62619062/unable-to-use-assets-in-url-in-scss-after-upgrading-to-angular-10/62619147#62619147

For solution 2 it's written in the cons

The second solution will not work in the production build if --base-href is used

For this case, use the --deployUrl in the build command

my command:

ng build --prod --base-href "/ng-myprofile/" --deployUrl "/ng-myprofile/"

look here in the generated files:

working github page deployed after upgrade from angular7 to angular10 here: https://nasreddineskandrani.github.io/ng-myprofile/

BONUS: (i use solution 2 personally right now) There is also 2 other solutions not mentionned in your stackoverflow

solution 4: url('~src/assets/PATH_TO_IMAGE') it works but this create a copy of image in the root deploy folder (tested in angular 9 and 10)

solution 5: the flag is depracted but it also fix the problem (tested in angular 9 and 10) rebaseRootRelativeCssUrls from https://angular.io/cli/build

---

Hi @alan-agius4 @filipesilva, A proposition to you guys.

This has multiple time create regression from angular 2 to now.

1. A must: Please I think it needs to be documented officially to present what is the right way to do it and you update this post or doc overtime if you change things in webpack configs internally (at least in your angular blog in medium if not in the angular doc).

2. A nice to have: Add an example in the main generated example app about an asset image in scss* if possible.

3. A nice to have: A unit/integration test? OR e2e (with protractor) OR visual test (with tools like applitools or percy) your side in google) to make sure it doesn't break again.

thank you

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}