# Change State of an Image

**URL:** <https://forums.fusetools.com/t/change-state-of-an-image/5001>\
**Category:** How-to Discussions\
**Created:** [June 26, 2017, 4:11pm UTC](https://forums.fusetools.com/t/change-state-of-an-image/5001 "2017-06-26T16:11:03Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Matt](https://avatars.discourse-cdn.com/v4/letter/m/a6a055/32.png) [@Matt](https://forums.fusetools.com/u/Matt)\
**Post date:** [June 26, 2017, 4:11pm UTC](https://forums.fusetools.com/t/change-state-of-an-image/5001/1 "2017-06-26T16:11:03Z")

</div>

Attempting to change an image depending on the state selected. In the following example I have an Image called “someColor”, with an File attribute. Depending on the state selected through the 2 buttons, the original image displayed should change to the new value given in the function.  
Reading in the forums and slack, it looks like Change doesn’t support `File="sample.png"`.

I tried it also by setting an ImageSource, and calling the `Source="sample.png"` on the Change function, but without luck.

I was also thinking of setting an Observable, but don’t know how I would set the original state to an observable with the path of an image, `var someString = Observable("sample.png");` , as it would just read it as a string of sample.png.

What would be a good way to go about this?

```auto
	    <Panel Width="100" Height="100">
	        <Image ux:Name="someColor" File="sample2.png"/>
	    </Panel>
	    <StateGroup ux:Name="stateGroup">
	        <State ux:Name="redState">
	            <Change someColor.File="sample3.png" Duration="0.2"/>
	        </State>
	        <State ux:Name="blueState">
	            <Change someColor.File="sample4.png" Duration="0.2"/>
	        </State>
	    </StateGroup>
	    <Grid ColumnCount="3">
	        <Button Text="Red">
	            <Clicked>
	                <Set stateGroup.Active="redState"/>
	            </Clicked>
	        </Button>
	        <Button Text="Blue">
	            <Clicked>
	                <Set stateGroup.Active="blueState"/>
	            </Clicked>
	        </Button>
	    </Grid>

```

---

<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:** [June 26, 2017, 4:59pm UTC](https://forums.fusetools.com/t/change-state-of-an-image/5001/2 "2017-06-26T16:59:05Z")

</div>

Hi Matt,

you’re asking a lot of questions here, while you should have started with describing what it is that you’re willing to make. It would be far easier to suggest the right approach then.

Now, having given this a little test, I can confirm that changing the `Source` of an `Image` works just fine, provided you have created the necessary resources for it:

```auto
<App>
    <FileImageSource ux:Global="a1" File="1.jpg" />
    <FileImageSource ux:Global="a2" File="2.jpg" />
    <Panel Width="160" Aspect="1" BoxSizing="FillAspect" HitTestMode="LocalBounds">
        <Image ux:Name="theImage" Source="a1" StretchMode="UniformToFill" />
        <WhilePressed>
            <Change theImage.Source="a2" />
        </WhilePressed>
    </Panel>
</App>

```

While that works, I’m also certain that you probably don’t want to define a `ux:Global` for every image you have in your project. There are ways to achieve the same result using data-binding to JavaScript and including the images in your `:Bundle`.

---

<div class="post-metadata">

**Author:** ![Matt](https://avatars.discourse-cdn.com/v4/letter/m/a6a055/32.png) [@Matt](https://forums.fusetools.com/u/Matt)\
**Post date:** [June 26, 2017, 5:06pm UTC](https://forums.fusetools.com/t/change-state-of-an-image/5001/3 "2017-06-26T17:06:38Z")

</div>

Thanks for the quick response.

The example works, as you said. Looks like I missed something when I tried attempted to do the same thing before. I’ll read up on bundling and data binding to make this work for my app. Thank you!

---

<div class="post-metadata">

**Author:** ![John](https://avatars.discourse-cdn.com/v4/letter/j/a3d4f5/32.png) [@John](https://forums.fusetools.com/u/John)\
**Post date:** [June 30, 2017, 5:28pm UTC](https://forums.fusetools.com/t/change-state-of-an-image/5001/4 "2017-06-30T17:28:53Z")

</div>

> **Uldis wrote:**  
> …  
> While that works, I’m also certain that you probably don’t want to define a `ux:Global` for every image you have in your project. There are ways to achieve the same result using data-binding to JavaScript and including the images in your `:Bundle`.

Hey, would it be possible, you give us a small example of this one?  
I’m trying it since (i dont know anymore), but I cant get it to work.  
I can fetch all my required datas, and display them as i want, but this image-one is killin me.

Thank you soo much

Grateflly

Blade

---

<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:** [June 30, 2017, 8:44pm UTC](https://forums.fusetools.com/t/change-state-of-an-image/5001/5 "2017-06-30T20:44:54Z")

</div>

Hi John,

while your question is, indeed, related to the topic, you should avoid hijacking threads.

Could you please make a new forum post, where you include some of your code (we like complete, minimal repros best) to show what you have already tried / working and describe what it is that you want & fail to achieve?

---

<div class="post-metadata">

**Author:** ![John](https://avatars.discourse-cdn.com/v4/letter/j/a3d4f5/32.png) [@John](https://forums.fusetools.com/u/John)\
**Post date:** [June 30, 2017, 9:09pm UTC](https://forums.fusetools.com/t/change-state-of-an-image/5001/6 "2017-06-30T21:09:02Z")

</div>

Omg, thank you soo much for answering me.  
Okay I will create a test case with minimal input to recreate the problem and start a new thread.  
What should I do about the “backend”-part which gives the data to the fetch (it is in my local lan)?

And sorry for the hijacking, this will be my last post here in this thread

---

<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:** [June 30, 2017, 9:13pm UTC](https://forums.fusetools.com/t/change-state-of-an-image/5001/7 "2017-06-30T21:13:33Z")

</div>

I believe you can just include a mock JSON object right in the JavaScript code of the example, or in a separate file. If you want to get fancy, you can write a JS module that holds functions which return JSON objects, just like your backend would.