assets - tremho/thunderbolt-common GitHub Wiki

All assets are based off of the src/assets folder of project. This is migrated to the effective webroot for both the Electron and Nativescript builds.

When supplying an image url for background-settings or background-image, use the form "url('path')" (see discussion on background-settings)

Subfolders within the assets directory is fine. Thus, if you have an image at src/assets/images/myImage.png, you could specify background-image="url('images/myImage.png')" to reference this image as a background.

Note that on Android, you will see 4-5 error messages such as java.net.MalformedURLException: no protocol: images/myImage.png emitted at the Nativescript console, however, the image will appear, so you can ignore these false warnings (they occur because Android tries to qualify the image path before the url has been rebased). Fortunately, though, if there actually is an error loading the file (as in it does not exist), you will see an error such as java.io.FileNotFoundException: /data/data/org.nativescript.tbTest/files/app/assets/images/myImage.png (No such file or directory)

Background images from remote URL work as expected without spurious noise.

Note that on Android, full image sizes will appear much smaller (about 3.5X smaller) than on iOS or Electron. Curiously, sized images appear at a size consistent with the other platform appearances, though.

Setting background properties from CSS requires using the individual properties (i.e. background won't work across targets and background-settings isn't supported from CSS)

When setting a local image url from CSS, the image comes from the assets folder. Specify it like this for Nativescript:

  background-image: url("images/myImage.png");

and like this for Electron:

  background-image: url("./assets/images/myImage.png");

While it is indeed unfortunate to have to split your CSS in this way, that's the way it is. You can use prefixed SCSS file names (myStyles.mobile.scss, myStyles.desktop.scss) to declare separate scss rules, or use the runtime classes to override:

  .myStyle {
      background-image: url("./assets/images/myImage.png")
  }
  .ns-android, .ns-ios {
      myStyle {
          background-image: url("image/myImage.png")
      }
  }

or alternately, declare other aspects of the class in CSS, but put the background-image in the markup, where it is handled by the XML properties normalization.