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

BearZon · Accepted Answer · 2019-11-27 14:04:07Z

13

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

answered Nov 27, 2019 at 14:04

BearZon

3113 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ether6 Over a year ago

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

curiousBoy Over a year ago

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

Aviad P. Over a year ago

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

Don Tomato · Accepted Answer · 2019-06-17 11:03:25Z

5

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.

edited Jun 17, 2019 at 11:03

answered Jun 17, 2019 at 6:56

Don Tomato

3,5474 gold badges34 silver badges51 bronze badges

9 Comments

paras shah Over a year ago

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

Don Tomato Over a year ago

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

Don Tomato Over a year ago

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

paras shah Over a year ago

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

paras shah Over a year ago

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

|

Akash · Accepted Answer · 2019-12-04 07:38:43Z

1

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

answered Dec 4, 2019 at 7:38

Akash

5,2313 gold badges30 silver badges42 bronze badges

1 Comment

Serene Abraham Mathew Over a year ago

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

geisterfurz007 · Accepted Answer · 2019-11-04 15:26:16Z

0

Try this:

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

edited Nov 4, 2019 at 15:26

geisterfurz007

5,9346 gold badges37 silver badges59 bronze badges

answered Nov 4, 2019 at 15:08

bpena

213 bronze badges

Comments

Damith · Accepted Answer · 2019-06-17 07:02:35Z

-1

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%;

answered Jun 17, 2019 at 7:02

Damith

2,0923 gold badges29 silver badges44 bronze badges

1 Comment

paras shah Over a year ago

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

Collectives™ on Stack Overflow

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

5 Answers 5

3 Comments

9 Comments

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

9 Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related