1

According to Where do Images go in IONIC 2 and the ionic changelog I should be putting images in src/assets/img.

This does work for <img src="assets/img/...

However, it does not work for images referenced in scss files. So for example I may have pages/login/login.html that has the above image and that works, but then in pages/login/login.scss I have:

border-image: url("assets/img/...

Based on some debugging it seems like it's trying to load the image from www/build/assets in the CSS files, but www/assets in html.

Is there something else I need to do to get image assets loading properly in the scss files?

Community
  • 1
  • 1
Explosion Pills
  • 188,624
  • 52
  • 326
  • 405

1 Answers1

5

You must refer to your image a directory above the traditional working directory, as your stylesheet is nested within the directory that the page is traditionally accessed.

For example, to set the background image of a <div> tag such as <div class="cover"></div>, you would implement the following in your .scss file for that page.

.cover{
    background-image: url('../assets/img/bg.jpg');
}


Edit: The Ionic Super Starter repository on Github is meant to show you some of the page layouts and best practices for your Ionic 2 project.

If you take a look at the .scss stylesheet for the landing/welcome page you can see that the background image is referenced in the same way with the following line:

     background: url('../assets/img/splashbg.png') no-repeat transparent;
timtheguy
  • 141
  • 4
  • Is there anything in any documentation that indicates this? – Explosion Pills Apr 25 '17 at 20:59
  • @ExplosionPills take a look at the edit I just made to the original answer for more support. In the Ionic 2 sample from driftyco and best practices application you can see that the background image is referenced in the same way. – timtheguy Apr 26 '17 at 20:17