ng build --base-href="/.../" --deploy-url="/.../" css background image not working

Question

"@angular/core": "~8.0.0",

scaffold angular 8 project with scss style option

i have code for as mentioned below in component scss file

background: url("/assets/images/vector-icon.png") no-repeat 25%;

at the final buil using command

ng build --prod --base-href="/website/" --deploy-url="/website/"

put build at sub folder root/webside

everything working fine except background image path

i have tried by ip/website/assets/images/vector-icon.png at that point i am able to get image.

What if i don't wont to change the path at every css file.

any help would be appreciated. thanks in advance

Sexagenarian

Answer 1

The solution is to put "rebaseRootRelativeCssUrls": true in the angular.json file.

The / before assets is correct.( url(/assets/img...) )

 "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
           ...
           "rebaseRootRelativeCssUrls": true

Lynnet

This issue arose for us when upgrading from Angular 6 to 8. Adding this in the build options, fixed it. Thanks! – Sisk

rebaseRootRelativeCssUrls is deprecated and will be removed in the next major release. Reference: angular.io/cli/build – Boone

@Boone What would replace it? Because this functionality is needed, apps simply don't work without this rebasing – Aldebaran

Answer 2

Don't use / before assets

background: url("assets/images/vector-icon.png") no-repeat 25%;

PS. And the assets/images folder has to contain this image.

PPS. Make sure this path is correct.

Vigorous

getting this error (Emitted value instead of an instance of Error) CssSyntaxError: – Sexagenarian

@parasshah does your assets/images folder contain this vector-icon.png file actually at the time of building? – Vigorous

@parasshah I asked, because you have to see this error, in case an image doesn't exist or a path is incorrect. – Vigorous

@Don_Toamto yes you are right at same path image is exists and it is working at loca host – Sexagenarian

but how can i overcome the compilation error due to whic i am not able to build my project – Sexagenarian

@parasshah Building should work as well as local serve, subject to the availability of image you reference to in styles. – Vigorous

i agree but it isn't working in my case i do have image at correct path and also did the same as you said but getting this error of compilation can you please help me that ? (Emitted value instead of an instance of Error) CssSyntaxError: – Sexagenarian

@parasshah could you create a new empty angular project and reproduce this error. And upload it to the GitHub? – Vigorous

Having the same issue. Base path set and working for everything except the background image. Seems to be limited to Angular 8, as its fine in my Angular 7 project – Belfast

Answer 3

Faced this problem myself. Instead of /assets..., use src/assets.... Make sure you don't put / before src.

Correll

This add a copy of your image in your root of dist folder, – Sitdown

Answer 4

Try this:

background: url("/src/assets/images/vector-icon.png") no-repeat 25%;

Boy

Answer 5

First thing you need to check that go to assets folder and check that file exists or not. If file exists, try below line

background: url('./assets/images/vector-icon.png') no-repeat 25%;

Rework

getting same compilation error (Emitted value instead of an instance of Error) CssSyntaxError: – Sexagenarian