CODEWITHSUNDEEP
angularangular-cliscss-mixinsangular8
paras shah
paras shah

Reputation: 889

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

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

Upvotes: 5

Views: 14253

Answers (5)

Akash
Akash

Reputation: 5221

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

Upvotes: 1

BearZon
BearZon

Reputation: 311

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

Upvotes: 13

bpena
bpena

Reputation: 21

Try this:

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

Upvotes: 0

Don Tomato
Don Tomato

Reputation: 3539

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.

Upvotes: 6

Damith
Damith

Reputation: 2082

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

Upvotes: -1

Related Questions