Set page backgroundImage property in xml or code


#1

Hello,

I have been trying to set the page background images using vanilla javascript or declare it in xml but having no success. The file is stored in the App_Resources folder. I think the problem is with the 'res:// ’ because if i do ‘~/images/file_name.png’ the file is loaded but this method removed the advantages of using ‘res://file_name’. Here is my code:

<Page
class="page login-page"
id="login"
navigatingTo="onNavigatingTo"
loaded="loaded"
xmlns="http://www.nativescript.org/tns.xsd"
actionBarHidden="true"
backgroundImage = “~/images/background.png” //does work
backgroundImage = “res://background.png” //does not work
>

I even tried:
const pageModule = require(“ui/page”);

function onNavigateTo(){
pageModule.backgroundImage = ‘res://background.png’;
}

but that does not work either. I get an error that says the file cannot be found. Can anyone point me in the right direction?


#2

Can you share a screenshot of your App_Resources folder where the image(s) live?


#3


#4

I got this to work but one thing I realized is that “res:” does not like file extensions and files with dashes or underscores. but I got “res://background” to work.