Angular copies images to its root folder

Question

I keep my assets images under 'assets/images/icons' folder and in my style.scss file I have rules like 'background: url(assets/images/icons/searchbox_magnifier.png) no-repeat #f5f5f5;' but while making a production build, Angular is coping all those files to its root folder and changing style.scss rules according to it, like 'background: url(searchbox_magnifier.png)', see the images attached.

style.scss production build

How to avoid the issue?

Answer 1

I had the same problem. It is solved simply by changing the paths from relative to absolute.
For example,
background-image: url("../../../assets/images/background.svg")
or
background-image: url("~src/assets/images/background.svg")

replace with
background-image: url("/assets/images/background.svg").

It will solve your problem

Answer 2

I was facing the same issue. Images from assets folder, if used as relative paths in the CSS files, are COPIED to the root of the dest build.

if the path in the CSS is absolute, it does not. using absolute path solved the problem for @angry beaver , only because his application is deployed into the root folder of his web-server.

please note, that if you use --base-href in your build, it will append it to the url inside the CSS files. thus making it a problem for doing a build that needs to be deployed to different destinations (qa/pre-prod etc) if each one is in another sub-folder (for example, qa is in the root folder, and production is in a subfolder)