# Change image displayed based of off row user selects from table

**URL:** <https://forum.inductiveautomation.com/t/change-image-displayed-based-of-off-row-user-selects-from-table/27585>\
**Category:** Ignition\
**Created:** [August 19, 2019, 8:51pm UTC](https://forum.inductiveautomation.com/t/change-image-displayed-based-of-off-row-user-selects-from-table/27585 "2019-08-19T20:51:08Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![David.Bell](https://avatars.discourse-cdn.com/v4/letter/d/34f0e0/32.png) [@David.Bell](https://forum.inductiveautomation.com/u/David.Bell)\
**Post date:** [August 19, 2019, 8:51pm UTC](https://forum.inductiveautomation.com/t/change-image-displayed-based-of-off-row-user-selects-from-table/27585/1 "2019-08-19T20:51:08Z")

</div>

Hello, I want to display different pictures based on the data in a table that the user clicks. For example, if I have the following table

Row Image  
1 Click to show a flower  
2 Click to show a car  
…

---

<div class="post-metadata">

**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\
**Post date:** [August 19, 2019, 9:02pm UTC](https://forum.inductiveautomation.com/t/change-image-displayed-based-of-off-row-user-selects-from-table/27585/2 "2019-08-19T21:02:30Z")

</div>

You’ll want to use the `onMousePress` or `onDoubleClick` event handlers in the component scripting of a power table. From there you can set the image path on the image component. It is easy to write the picture path to a string memory tag with the tag bound to the image component.

```auto
data = self.data
clickData = data.getValueAt(rowIndex, 'yourColumnName')

if clickData == 'cat':
          path = 'catPic.jpg'
else:
          path = 'carPic.jpg'
system.tag.write.('picPathTag',path)

```

---

<div class="post-metadata">

**Author:** ![David.Bell](https://avatars.discourse-cdn.com/v4/letter/d/34f0e0/32.png) [@David.Bell](https://forum.inductiveautomation.com/u/David.Bell)\
**Post date:** [August 19, 2019, 9:06pm UTC](https://forum.inductiveautomation.com/t/change-image-displayed-based-of-off-row-user-selects-from-table/27585/3 "2019-08-19T21:06:51Z")

</div>

> [@dkhayes117](#):
>
> se the `onMousePress` o

Will try that. Thanks!

---

<div class="post-metadata">

**Author:** ![JordanCClark](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jordancclark/32/83362_2.png) [@JordanCClark](https://forum.inductiveautomation.com/u/JordanCClark)\
**Post date:** [August 19, 2019, 9:18pm UTC](https://forum.inductiveautomation.com/t/change-image-displayed-based-of-off-row-user-selects-from-table/27585/4 "2019-08-19T21:18:55Z")

</div>

You could also make the image names (or paths to the image) as a hidden column. a simple lookup expression could take it from there.

---

<div class="post-metadata">

**Author:** ![David.Bell](https://avatars.discourse-cdn.com/v4/letter/d/34f0e0/32.png) [@David.Bell](https://forum.inductiveautomation.com/u/David.Bell)\
**Post date:** [August 19, 2019, 10:08pm UTC](https://forum.inductiveautomation.com/t/change-image-displayed-based-of-off-row-user-selects-from-table/27585/5 "2019-08-19T22:08:54Z")

</div>

I tried the system.tag.write, but did not get it working. I am able to create a session variable and it points to the file, but when I bind it to the image property, it comes back blank. Is there a way for an image file to use a session variable?

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [August 20, 2019, 2:33pm UTC](https://forum.inductiveautomation.com/t/change-image-displayed-based-of-off-row-user-selects-from-table/27585/6 "2019-08-20T14:33:15Z")

</div>

You have to supply the path to the photo file, not just the name of the file.  
The easiest way is to place the image in a location which can be served by your Gateway - `Inductive Automation\Ignition\webserver\webapps\main`, for example - and then supply the path within that directory.

Assuming a file located at `C:\Program Files\Inductive Automation\Ignition\webserver\webapps\main\carpic.jpg`, you should be able to supply `carpic.jpg` for the image `source`.

---

<div class="post-metadata">

**Author:** ![David.Bell](https://avatars.discourse-cdn.com/v4/letter/d/34f0e0/32.png) [@David.Bell](https://forum.inductiveautomation.com/u/David.Bell)\
**Post date:** [August 20, 2019, 3:16pm UTC](https://forum.inductiveautomation.com/t/change-image-displayed-based-of-off-row-user-selects-from-table/27585/7 "2019-08-20T15:16:30Z")

</div>

Thank you. I also noticed that the filename is case sensitive. I had JPG in the string,but the picture was jpg. Once I corrected the case, the problem was fixed.
