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

[maxpfandl]

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.

[chriseenberg]

I'm having the same issue. Building with href flag makes my assets folder unreachable to my code. If i navigate to the path in the browser with the href put into it, the image gets loaded.

I should add that i dont use it in the scss but simply adding a <img> tag and a path to assets folder.

Is there a workaround to this?

Kind regards - Chris

[maxpfandl]

@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.

[chriseenberg]

It seems that what ever you linked is broken :/ where it says: "simple use " and then something that i can't resolve.

Thanks for answering my post. I tried adding the assets folder to angular-cli.json, but it will prefix my assets folder with the specified href tag so i cant reach my images i.e. href = xxx - xxx/assets/images - where i look for assets/images . From what i understand from your post, this is supposed to work?

Im sorry if i misunderstood your post in the first place :)

[clydin]

The root relative URL handling for style sheet urls is currently broken if using a base href. As a workaround you can use a relative URL that is referenced from the stylesheet instead of the project root. This will cause the asset to be managed by the build system so be aware that you will end up with two copies if the asset is also copied on build.

Also note that, HTML templates are unaltered by the build process.

[chriseenberg]

It works now. i navigated to the resource with ../ instead of ./ as you said @maxpfandl ! Thank you so much for your help!

[arntj]

I'm having the same problem. Relative paths in stylesheets don't work after updating to angular-cli beta 32.3.

[arntj]

If it is helpful to you, I can try to make a minimal repro of this issue.

[clydin]

Please try using a relative path from the stylesheet/component location instead of the project root.

[arntj]

@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).

[arntj]

Correction: The image is copied to the root when doing ng build.

But the image is not copied to the root when doing ng build --prod. This is where the problem lies at for me: I need to be able to build everything, drop it in an ASP.NET web application on an IIS server, and trust that all images in the assets subdirectory are correctly linked in the CSS. (Or at least, that all images linked are reachable on the server.)

[martinmcwhorter]

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'

[kunee]

relates to #4778

[filipesilva]

Dupe of #4778.

Please check out @clydin's great answer at #4778 (comment) regarding exactly what happened.