How i can bind a FileImageSource to an Observable variable

How-to Discussions
1

Hi
i cant find a way to bind the file source of my image so i can change it from code

<Page ux:Class="MainApp" Transition="None">
  <JavaScript>
    var Observable = require("FuseJS/Observable");
    
    var img_src_front =  Observable("Assests/background_2.jpg");

    function NextQuote() {
      console.log("Go Next !");
      img_src_front.value = "Assests/background_1.jpg";
    }
    
    module.exports = {
      NextQuote: NextQuote,
      img_src_front : img_src_front,
    }
  </JavaScript>
  <Image ux:Name="bg_front" StretchMode="UniformToFill" Layer="Background">
    <FileImageSource File="{img_src_front}" />
  </Image>
<Page>

thanks you

2

I just made a test app using the images I had laying around, and it works just fine:

<App>
	<Panel ux:Class="ImageTest">
		<JavaScript>
		var Observable = require("FuseJS/Observable");
		var path = Observable("1.jpeg");
		function toggle() {
			if (path.value == "1.jpeg") {
				path.value = 2.jpeg";
			} else {
				path.value = "1.jpeg";
			}
		}
		module.exports = {
			path: path,
			toggle: toggle
		};
		</JavaScript>
		<Image Width="240" Height="240" StretchMode="UniformToFill">
			<FileImageSource File="{path}" />
			<Clicked Handler="{toggle}" />
		</Image>
	</Panel>
	<ImageTest />
</App>

The only thing you need to be aware of is that you need to ensure your images are added to the bundle since they’re not referenced from UX anywhere. In my .unoproj file, I have this:

...
  "Includes": [
    "*",
    "*.jpg:Bundle",
    "*.jpeg:Bundle"
  ],
...
3

its working ! thanks for your help .