Ionic: Image not shown when running on device

Question

I've set background image for a div in my scss file:

#header {
  background-image: url('/assets/images/background/bg1.jpg')!important;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 100px;
}

The assets directory is under src, next to pages.

The image is shown when I use ionic serve and ionic cordova run android -lc. But when running the app on device using ionic cordova run android, the image is not shown. I've read almost all the similar questions regarding this issue and all of them point out that relative addresses should be avoided and the path should start with assets. I tested my path to start with assets and it does not show anything (even with ionic serve, because it tries to load the image from http://localhost:8100/build/assets/images/background/bg1.jpg). But starting the path with /assets works and loads the image from http://localhost:8100/assets/images/background/bg1.jpg.

How can I fix this? How to make the image appear on the device when not using -lc?

P.S. This is the directory structure under src:

├───app
├───assets
│   ├───fonts
│   │   └───custom
│   ├───i18n
│   ├───icon
│   └───images
│       ├───background
│       └───markers
├───components
│   └───progress-bar
├───models
├───pages
│   ├───friends
│   ├───home
│   ├───login
│   ├───map
│   ├───tabs
│   └───items
├───providers
│   ├───alert
│   ├───map
│   └───message
└───theme

My scss file is under the pages/items directory. Additional tests gave me the following results indicating in which conditions the image was shown:

+------------------+-------------+-----------------+-------------+
| Path starts with | ionic serve | run android -lc | run android |
+------------------+-------------+-----------------+-------------+
| assets           | No          | No              | No          |
| /assets          | Yes         | Yes             | No          |
| ./assets         | No          | No              | No          |
| ../assets        | Yes         | Yes             | Yes         |
| ../../assets     | Yes         | Yes             | No          |
+------------------+-------------+-----------------+-------------+

Well, as you can see, ../assets/images/background/bg1.jpg is shown in all conditions, which is against my expectation! Does anybody know the reason?

Update: I extracted the generated apk file and here is the directory tree in it revealed:

├───assets
│   ├───fonts
│   │   └───custom
│   ├───i18n
│   ├───icon
│   └───images
│       ├───background
│       └───markers
├───build
├───cordova-js-src
│   ├───android
│   └───plugin
│       └───android
└───plugins
    ├───cordova-plugin-camera
    │   └───www
    ├───cordova-plugin-device
    │   └───www
    ├───cordova-plugin-file
    │   └───www
    │       └───android
    ├───cordova-plugin-file-transfer
    │   └───www
    ├───cordova-plugin-geolocation
    │   └───www
    │       └───android
    ├───cordova-plugin-googlemaps
    │   └───www
    ├───cordova-plugin-splashscreen
    │   └───www
    ├───cordova-plugin-statusbar
    │   └───www
    └───ionic-plugin-keyboard
        └───www
            └───android

All the scss files have been merged into a single file called main.css which is located under the build directory along with many other js files. And as can be seen in the tree, assets is located next to the build directory. So to get to the background image from the main.css file, it's clear that we should take this path: ../assets/images/background/bg1.jpg, that's why all are YES for the 4th record in the table. Now the question is why everybody is advising against using relative path and is insisting to use absolute path? Absolute path wont work this way!

Answer 1

I use

background-image: url('../assets/images/background/image_name.png');

instead of

background-image: url('../../assets/images/background/1.png'); and it work for me, hope it'll also work for you.

Answer 2

Updated Latest Answer :

Image file contain the following location :

src => assets => images => background => bg1.jpg

And the scss file contain the below location :

scr => pages => items => items.scss

for example inside the items folder

1. items.html
2. items.scss
3. items.ts

my exmaple is :

items.html

<div id="header"></div>

items.scss

problem is : change the url path background-image: url('../../assets/images/background/bg1.jpg'); instead of background-image: url('/assets/images/background/bg1.jpg')!important;

#header {
  background-image: url('../../assets/images/background/1.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 100px;
}

Answer 3

You can open your apk file and to determine right path for your image. You can open apk via a file archiver. I recommend to use "Remote Devices" of browser Chrome as well. It will save a lot of your time. Good luck))

Answer 4

You need to set the path as shown below. i.e. use ./assets/

background-image: url('./assets/images/background/bg1.jpg')!important;