Nativescript: Background Image Failing

[Jonatthu]

Please, provide the details below:

When I use in my css

.bg-background {
    background-image: url("https://www.bodybuilding.com/images/2016/june/8-benefits-to-working-out-in-the-morning-header-v2-830x467.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

and in my html

...
    <FlexboxLayout flexDirection="column" class="legend-wrapper bg-background" flexGrow="1">
        <Label text="TyFitt" class="title"></Label>
        <Label text="Workout is a life style." class="legend"></Label>
    </FlexboxLayout>
...

This error happends

7   0x10fb24e92 CA::Context::commit_transaction(CA::Transaction*)
8   0x10fb51130 CA::Transaction::commit()
9   0x10fb51b37 CA::Transaction::observer_callback(__CFRunLoopObserver*, unsigned long, void*)
10  0x10e019717 __CFRUNLOOP_IS_CALLING_OUT_TO_AN_OBSERVER_CALLBACK_FUNCTION__
11  0x10e019687 __CFRunLoopDoObservers
12  0x10dffe720 __CFRunLoopRun
13  0x10dffe016 CFRunLoopRunSpecific
14  0x10f3cba24 GSEventRunModal
15  0x10b1e10d4 UIApplicationMain
16  0x10a6648ed ffi_call_unix64
17  0x128ade870
file:///app/tns_modules/tns-core-modules/ui/styling/background.js:223:15: JS ERROR TypeError: null is not an object (evaluating
 'params.sizeX')
May  9 00:02:10 Jonathans-MBP com.apple.CoreSimulator.SimDevice.412B2668-1DA3-40F4-817D-3CCACF62450D.launchd_sim[4221] (UIKitAp
plication:org.nativescript.mobile[0xf386][4243][8945]): Service exited due to Segmentation fault: 11
12:02:11 AM - Compilation complete. Watching for file changes.

I'm using

"nativescript": {
    "id": "org.nativescript.mobile",
    "tns-ios": {
      "version": "3.0.0"
    },
    "tns-android": {
      "version": "3.0.0"
    }
  },
  "dependencies": {
    "@angular/common": "4.0.0",
    "@angular/compiler": "4.0.0",
    "@angular/core": "4.0.0",
    "@angular/forms": "4.0.0",
    "@angular/http": "4.0.0",
    "@angular/platform-browser": "4.0.0",
    "@angular/platform-browser-dynamic": "4.0.0",
    "@angular/router": "4.0.0",
    "nativescript-angular": "~3.0.0",
    "nativescript-theme-core": "~1.0.4",
    "reflect-metadata": "~0.1.8",
    "rxjs": "~5.2.0",
    "tns-core-modules": "~3.0.0",
    "zone.js": "~0.8.5"
  },
  "devDependencies": {
    "babel-traverse": "6.24.1",
    "babel-types": "6.24.1",
    "babylon": "6.17.0",
    "lazy": "1.0.11",
    "nativescript-dev-android-snapshot": "^0.*.*",
    "nativescript-dev-sass": "^1.1.1",
    "nativescript-dev-typescript": "^0.4.0",
    "typescript": "~2.2.1"
  }

The app only keep working when I am not using this class, and I try to load the image with the Image tag and it works

[tsonevn]

Hi @Jonatthu,
Indeed setting up background-image for some of the available Layouts will lead to an error, similar to the, which you have reported. I was able to reproduce this behavior only on iOS and also I am attaching sample project, which could be used for debugging.
Archive.zip

Meanwhile, you could use a different layout structure, which will allow you to display the image and the needed Labels. For example:

<GridLayout rows="*" columns="*">
    <Image row="0" col="0" src="https://www.bodybuilding.com/images/2016/june/8-benefits-to-working-out-in-the-morning-header-v2-830x467.jpg"></Image>
    <StackLayout row="0" col="0">
         <Label text="TyFitt" class="title"></Label>
        <Label text="Workout is a life style." class="legend"></Label>
    </StackLayout>
</GridLayout>

[Jonatthu]

@tsonevn I did this, it is working but I don't think is the best solution for a long term.
Thanks but stills in 2.5 was working

[Jonatthu]

@tsonevn This solution will not work as well as background-image, I can not get a very good result independently of the image size, Is this going to be fix it?

[tsonevn]

Hi @Jonatthu,
Thank you for contacting us again
I will discuss this problem with NativeScript Developer team and will provide some info when the fix will be available.
Ping @hshristov @vakrilov

[Jonatthu]

@tsonevn Thanks, Nativescript Team is doing a great job.

[vakrilov]

Hey @Jonatthu
Thanks for your feedback!
This issue seems to be quite critical - we will work on a resolution for it next week and it will be out in the @next builds as soon as it is fixed.

Will post an update when I have more info.

[SvetoslavTsenov]

The fix will be available in tns-core-modules@next.

[Jonatthu]

🙌🏼🙌🏼🙌🏼🙌🏼☝🏼☝🏼☝🏼☝🏼

[dtopuzov]

Fix will be released in 3.0.1 later this week.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.