Ionic-framework: [RC0] background-image only work with ionic serve, not ionic build

Created on 3 Oct 2016  路  4Comments  路  Source: ionic-team/ionic-framework

I've faced with the following problem: background-image from the scss file isn't showing when i'm building android apk by ionic build android command
Ionic 2 RC0

.image-fav {
  ...
  background-image:url(assets/img/remove.png);
}

The picture located in src/app/assets/img/remove.png
When i'm trying the app from the browser with ionic serve all works fine
The same problem

Most helpful comment

SOLVED

  1. Add your images to src/assets/imgs directory

  2. Set image path in HTML like
    <img src="assets/imgs/example.jpg">

  3. Set image path in SCSS like
    background-image: url(../assets/imgs/example.jpg);

It will work browser, emulator and build

All 4 comments

Check the path to your image, where assets are kept changed relative to where pages are in the move to RC0. I have the following in the scss for one of my pages to display a background image and once I adjusted the path to the image all works as expected on device.

.cached-home {
background-image: url('../assets/img/crowdsun.jpg');
background-repeat:no-repeat;
background-size:cover;
width:100%;
}

@ghenry22, it helped to me, thanks.

SOLVED

  1. Add your images to src/assets/imgs directory

  2. Set image path in HTML like
    <img src="assets/imgs/example.jpg">

  3. Set image path in SCSS like
    background-image: url(../assets/imgs/example.jpg);

It will work browser, emulator and build

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Was this page helpful?
0 / 5 - 0 ratings