Stenciljs - Background image css path

Question

Im trying to add a background image on my scss file but I could not make it work.

This is the code on my scss file:

  background-image: url('./assets/images/Square.svg');

And when I use my component on my other app this is the path I get:

which is not my component path.

I tried to add ‘/dist/collection/assets/images’ but it did not worked

I found this bug report https://github.com/ionic-team/stencil/issues/923 1 but it is closed and it seems that was not fixed.

user_4811781 · Answer

You can use background:url(data:image/gif;base64,... with base64 image instead of using a relative or absolute url.

Here is a URL for more information https://css-tricks.com/data-uris/

user_5746417 · Answer

Stencil by default copy assets folder in www.

I think you just can remove the ./ from the image path and just directly refer image in scss file.

background-image: url('assets/images/Square.svg');

This should work. I have tried and this is working.

Working Code Sample