Image not shown when running on device

#1

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 threads in this forum 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!

2 Likes
#2

Who does that where exactly?

#3

That’s a lotta investigation.

I think normally you should be able to do it with simply assets/whatever.jpg

#4

Or ../assets/... if you are one directory deeper, right?

#5

It’ll always be at the level of the index.html as far as I know.

#6

I believe the reason is that paths in CSS files are relative to where the CSS file itself is, and in this case the initial ../ is required to break out from under build.

1 Like
#7

Well, maybe I misunderstood them, but here are some:



2 Likes
#8

And I wonder how is ../assets working when using ionic serve? Because in the normal development directory structure we have to go two directories up to reach assets.

#9

Look at how build includes the JS. This is not served directly from disk, but also compiled into a folder.

1 Like
#10

When addressing images from your .ts files, use ../assets relative path because we have to get out of the build directory first. When addressing the image from your .html files, use assets relative path, because in the final apk file all htmls are merged into one single file called index.html which is placed next to the assets directory and there is no need to go up one level before reaching assets.

7 Likes
#11

you saved my day thank you!

#12

tanısabilir miyiz, bende ionic 3 ile ilgileniyorum belki birbirmize yardımız dokunur. cotzan@yahoo.com mail atabilrisiniz