5

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:

http://localhost:4200/assets/images/Square.svg

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.

arturorv00
  • 131
  • 3
  • 11
  • try [this](https://forum.ionicframework.com/t/background-image-for-page-on-ionic/52466/8) – nyx97 Nov 13 '18 at 05:05
  • During build, stencil copies everything from the assets path to the output, which should be served under `/assets`. Have you tried absolutely referencing your image, i. e. `background-image: url('/assets/images/Square.svg');` (without the leading dot)? – Simon Hänisch Nov 15 '18 at 21:28
  • I tried both comments and none have worked. It looks to be a common problem since `npm start` will show the picture and we continue developing. Until the component is imported in a real life app where none of its assets are being copied into the `build` dir. Finally [documentation](https://stenciljs.com/docs) doesn't help at all. – Lucio Feb 04 '19 at 03:57
  • Using an absolute URL is not a solution, because the component can be included on a page that isn't at the root. Or hosted in a place other than the current web server (e.g. unpkg.com) – Vectorjohn Mar 25 '19 at 18:35
  • @arturorv00 did you ever resolve this problem? – Michael Burger May 03 '19 at 07:33
  • What I did was to move my assets to the consumer app. so basically I did a task that copy the /assets folder from the webcomponent and paste it on the app I am using to consume the webcomponent, does it make sense? – arturorv00 Jul 16 '19 at 19:58

2 Answers2

3

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/

Daniil T.
  • 1,145
  • 2
  • 13
  • 33
Martin Bélanger
  • 31
  • 2
0

Stencil by default copy assets folder in www.

Stencil assets config docs

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

Ritesh Singh Rajput
  • 341
  • 2
  • 13
  • Can you please try to give the URL in scss directly. do not append ./ in image path because it will expect image in domain root folder not in component's folder – Ritesh Singh Rajput May 06 '19 at 06:34