Solvedangular cli Assets not found in scss/css when using base-href

Please provide us with the following information:

OS?

Windows 10 x64

Versions.

@angular/cli: 1.0.0-beta.32.3 [1.0.0-beta.28.3]
node: 7.2.0
os: win32 x64
@angular/common: 2.4.7
@angular/compiler: 2.4.7
@angular/core: 2.4.7
@angular/forms: 2.4.7
@angular/http: 2.4.7
@angular/platform-browser: 2.4.7
@angular/platform-browser-dynamic: 2.4.7
@angular/router: 3.4.7
@angular/cli: 1.0.0-beta.32.3
@angular/compiler-cli: 2.4.7

Repro steps.

create an app with ng-cli. create a build for a server (not ng serve) with base-href set to xxx. use url's in scss (like background-image: url('/assets/img/myimg'). the imagepath for the url will be set to server/assets/img/myimg instead of server/xxx/assets/img/myimg. If I try to use a relative path in the scss (ie url('./assets/img/myimg') ) i get a compileerror, that this is not resolveable. If i try to use url('assets/img/myimg') this is also not resolveable for the compiler.
my .angular-cli.json has this section:
"assets": [
"assets",
"favicon.ico"
],

The log given by the failure.

There is only a compileerror that the path is not resolveable or a runtime 404 when the resource is not found without using the base-ref in the url.

Mention any other details that might be useful.

There is a workaround for this issue: i set the style in my component directly and inject it like this:
<span ... [style.background-image]="getLogo()">

getLogo() {
return this._domSanitizer.bypassSecurityTrustStyle(url(${this.logosrc});
}

where logosrc = "./assets/img/myimg"


Thanks! We'll be in touch soon.

27 Answers

✔️Accepted Answer

@chriseenberg this actually works fine for me: simply use

<img src="./assets/img/myimg">

and make sure your assets folder is set in .angular-cli.json in the assets section.
I've used this pattern also in the scss-files, but the newest version broke this and i get a compile-error that those path's cannot be resolved.

Other Answers:

I am having the same/similar issue -- with no baseHref set.

In a component scss file I have the following:

  background: url('assets/profile-background.jpg');

When I do an ng build I get:

ERROR in ./src/app/xxxx/some.component.scss
Module not found: Error: Can't resolve './assets/profile-background.jpg' in 'C:\dev\xxxx\some\path'

I see that this issue is closed but nobody provided a solution or a work around, so how do I solve it???

I have a styles.scss - which is the main application style file, it isn't related to any specific component, so specifying the path from the component's root isn't relevant here .
And I try to load a font from this file, with this code:
src: url("/assets/fonts/SomeFont-Regular.ttf");

This code working great in ng serve mode.
But when I deploy in to production with this line: ng build --prod --base-href="/app-name/" the font is missing (404 not found).

This happens because in production the browser is looking for the fonts at: www.my-server.com/assets/fonts/... instead of www.my-server.com/app-name/assets/fonts/....

So how do I solve this problem?? Does anyone has a work around????

P.S I try to change the url:
url("assets/...")
url("/assets/...")
url("./assets/...")
None work for me.

I'm running Angular 6.x

P.P.S
I had the same issue with images referenced from scss file with background-image: url(/assets/1.png) but I solve this by replacing all the scss references to a html references <img src="assets/1.png">.
However this work around will not work since I can't load FONTs from html.

@clydin I tried doing that, but that didn't help. Actually, having to use a relative path is a part of the problem.

The problem in my case, is that I used to link the image like this, in the scss:
background-image: url(assets/some_image.png)

This would work, as the url path wouldn't be touched/changed, and the image placed in src/assets is correctly copied to the assets subdirectory in the ng build output.

But in the latest version of angular-cli, that won't compile. If I change to a path relative to the scss file, as @clydin suggests, then angular-cli will happily compile it. But now the problem is that the url in the output CSS will look like this:
background-image: url(some_image.png)

This works okay on the development server, but it does not work on the production server, because the image is not copied to the web root in the ng build output (it is copied to the assets subdirectory, as it should be).

In my case url("~src/assets/foo.svg") worked. As I see, every case is different ;).

More Issues: