# How i can bind a FileImageSource to an Observable variable

**URL:** <https://forums.fusetools.com/t/how-i-can-bind-a-fileimagesource-to-an-observable-variable/4271>\
**Category:** How-to Discussions\
**Created:** [August 12, 2017, 2:51pm UTC](https://forums.fusetools.com/t/how-i-can-bind-a-fileimagesource-to-an-observable-variable/4271 "2017-08-12T14:51:11Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ayoub44](https://avatars.discourse-cdn.com/v4/letter/a/977dab/32.png) [@Ayoub44](https://forums.fusetools.com/u/Ayoub44)\
**Post date:** [August 12, 2017, 2:51pm UTC](https://forums.fusetools.com/t/how-i-can-bind-a-fileimagesource-to-an-observable-variable/4271/1 "2017-08-12T14:51:11Z")

</div>

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

```auto
<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

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [August 14, 2017, 7:24am UTC](https://forums.fusetools.com/t/how-i-can-bind-a-fileimagesource-to-an-observable-variable/4271/2 "2017-08-14T07:24:16Z")

</div>

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

```auto
<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:

```auto
...
  "Includes": [
    "*",
    "*.jpg:Bundle",
    "*.jpeg:Bundle"
  ],
...

```

---

<div class="post-metadata">

**Author:** ![Ayoub44](https://avatars.discourse-cdn.com/v4/letter/a/977dab/32.png) [@Ayoub44](https://forums.fusetools.com/u/Ayoub44)\
**Post date:** [August 14, 2017, 12:14pm UTC](https://forums.fusetools.com/t/how-i-can-bind-a-fileimagesource-to-an-observable-variable/4271/3 "2017-08-14T12:14:07Z")

</div>

its working ! thanks for your help .