How to use --deploy-url + css background url properly

Question

I am building my angular app with ng build --deploy-url="/foo/bar/" and trying to display background images using css background: url("url");, but in the browser's dev tool I see incorrect url when it is trying to get the image.

if I try with: background: url("assets/img/img.svg") or background: url("./assets/img/img.svg") the request in the browser looks like: http://localhost:38080/foo/bar/img.svg So /assets/img/ disapears.

if I try with: background: url("/assets/img/img.svg") the request in the browser looks like: http://localhost:38080/assets/img/img.svg Which is kind of expected, but who knows I tried..

Any idea? Thanks in advance

Does that help? stackoverflow.com/questions/56625979/…

David
– David

2020-06-11 19:11:06 +00:00
Commented Jun 11, 2020 at 19:11 — David
– David, Commented Jun 11, 2020 at 19:11

LogicBlower · Accepted Answer · 2020-06-12 14:56:29Z

0

give the url without quote it will take care and resolve.

background: url(./assets/img/img.svg)

in my project i do it like at top of scss file

  $svg-relative-part: "./../../../../assets/svg/";
  $grey-close: 'grey.svg';
  background: url($svg-relative-part + $grey);

answered Jun 12, 2020 at 14:56

LogicBlower

1,3501 gold badge10 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

How to use --deploy-url + css background url properly

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related