Nativescript: When using remote background images, positioning css properties ignored

[rogangriffin]

When using the following css on a button, the image is sized correctly:
background-image: url('~/pages/0.jpg'); background-repeat:no-repeat; background-position: center center; background-size: cover;

If I change the background-image to be a remote image, for example:
background-image: url('http://img.youtube.com/vi/8W_1vg7W6Oo/0.jpg'); then the rest of the css for positioning the background image is ignored.

Apparently an image has to be local for it be able to be styled as a background image.

[rogangriffin]

For anyone who needs to get around this issue before it is fixed, you can load from a Base64 data URI instead, and the background-size, etc is respected in that case:

example:

var imageSourceModule = require("image-source");
var enums = require("ui/enums");

    imageSourceModule.fromUrl("http://img.youtube.com/vi/8W_1vg7W6Oo/0.jpg")
        .then(function (res) {
            var base64 = res.toBase64String(enums.ImageFormat.jpg);
            yourElement.backgroundImage = "url('data:image/jpg;base64," + base64 + "'')";
    }, function (error) {
        console.log("Error loading image: " + error);
    });

[vakrilov]

Confirmed.
I already got PR with the fix.
Strangely enough the other workaround is just to define the background-image property last in the CSS:

.bg-image {
    background-repeat:no-repeat; 
    background-position: center center; 
    background-size: cover;
    background-image: url('http://img.youtube.com/vi/8W_1vg7W6Oo/0.jpg');
}

[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.