# Implementation Image in Table **URL:** \ **Category:** Ignition\ **Created:** [December 26, 2023, 4:22am UTC](https://forum.inductiveautomation.com/t/implementation-image-in-table/83506 "2023-12-26T04:22:27Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![hisyam\_agung](https://avatars.discourse-cdn.com/v4/letter/h/9dc877/32.png) [@hisyam\_agung](https://forum.inductiveautomation.com/u/hisyam_agung)\ **Post date:** [December 26, 2023, 4:22am UTC](https://forum.inductiveautomation.com/t/implementation-image-in-table/83506/1 "2023-12-26T04:22:27Z")
Hello Everyone, I'm still learning about Ignition and need some guidance. Currently, I have a table and want to implement an image in one of the rows. Here is the detailed data, data generated from a database (SQL), and I want to make logic. Table : No | Detail Issue | Level | 1. | Issue\_1 | Level\_1 | 2. | Issue\_2 | Level\_4 | 3. | Issue\_3 | Level\_3 | How can I implementation in Ignition for Row "Level". If data in Level was "Level 1" then display image\_1 from Image Management, if data in Level was "Level 2" then display image\_2, etc. ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [December 26, 2023, 11:18am UTC](https://forum.inductiveautomation.com/t/implementation-image-in-table/83506/2 "2023-12-26T11:18:47Z")
> [@hisyam\_agung](#): > > I have a table and want to implement an image in one of the rows. I think you mean that you want to implement an image in one of the **columns**. I'm assuming that you will upload all the images to a dedicated folder using the Image Management tool. The basic steps are: 1. Create a new view with a custom property `imageFileName`. 2. Drop an image component onto the view. Bind the source property to `view.params.imageFileName`. Since you're probably just going to supply the image file name I suggest that you use an expression binding like `"system/images/myFolderName/" + {view.params.imageFileName}` or `"system/images/myFolderName/" + {view.params.imageFileName} + ".png"` You should be able to figure out the rest of the steps from the manual. [https://docs.inductiveautomation.com/display/DOC81/Table+Column+Configurations#TableColumnConfigurations-EmbeddingaViewinaTableCell](https://docs.inductiveautomation.com/display/DOC81/Table+Column+Configurations#TableColumnConfigurations-EmbeddingaViewinaTableCell) ---
**Author:** ![hisyam\_agung](https://avatars.discourse-cdn.com/v4/letter/h/9dc877/32.png) [@hisyam\_agung](https://forum.inductiveautomation.com/u/hisyam_agung)\ **Post date:** [December 28, 2023, 3:46am UTC](https://forum.inductiveautomation.com/t/implementation-image-in-table/83506/3 "2023-12-28T03:46:42Z")
Yeah correct in Column, but I still struggling with binding data and making logic. I already create View with binding to params ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/7/679d0ae2b53992fbd326e771f5cfe99dd188a218.png) when I implemented in Table, I just confused how make logic and binding. When the column "Level" was level 1, then display Image\_1 from source Image Management. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/8/48804793512a5189de6c6b20d5e06ac669c32150.png) So, did I must create script on table or on view ? Or do you have any suggestion? ---
**Author:** ![David\_Stone](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/david_stone/32/79749_2.png) [@David\_Stone](https://forum.inductiveautomation.com/u/David_Stone)\ **Post date:** [December 28, 2023, 6:13am UTC](https://forum.inductiveautomation.com/t/implementation-image-in-table/83506/4 "2023-12-28T06:13:11Z")
On your view where the image would be displayed, create a view param called `value`, write a binding that reads this value, and changes the `view.params.imageFileName` as @Transistor has written. When you use the view as a subview on a table, the `value` will be filled with the value of the cell in the table, passed as a view param. ---
**Author:** ![hisyam\_agung](https://avatars.discourse-cdn.com/v4/letter/h/9dc877/32.png) [@hisyam\_agung](https://forum.inductiveautomation.com/u/hisyam_agung)\ **Post date:** [December 28, 2023, 7:52am UTC](https://forum.inductiveautomation.com/t/implementation-image-in-table/83506/5 "2023-12-28T07:52:23Z")
I was try like @Transistor says and still get error, Can you guide me? maybe my step was wrong. Here the detail data binding data I create same like source Image management. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/d/ed215a5c954563dfbfff079b9703170366996d08.png) Then for image name, I convert like this on named query ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/2/72406ddfdd211ba17500c7a1032b2ecebd2c76d7.png) r ---
**Author:** ![hisyam\_agung](https://avatars.discourse-cdn.com/v4/letter/h/9dc877/32.png) [@hisyam\_agung](https://forum.inductiveautomation.com/u/hisyam_agung)\ **Post date:** [December 28, 2023, 8:01am UTC](https://forum.inductiveautomation.com/t/implementation-image-in-table/83506/6 "2023-12-28T08:01:21Z")
Update, my fault binding in property (should binding using Expression) Not found error but Image still can't display ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/b/8b558c7856fefa2bbe04a50cd1094df23a28f363.png) ---
**Author:** ![David\_Stone](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/david_stone/32/79749_2.png) [@David\_Stone](https://forum.inductiveautomation.com/u/David_Stone)\ **Post date:** [December 28, 2023, 8:03am UTC](https://forum.inductiveautomation.com/t/implementation-image-in-table/83506/7 "2023-12-28T08:03:01Z")
What does the source read when given a rank value? ---
**Author:** ![hisyam\_agung](https://avatars.discourse-cdn.com/v4/letter/h/9dc877/32.png) [@hisyam\_agung](https://forum.inductiveautomation.com/u/hisyam_agung)\ **Post date:** [December 28, 2023, 8:31am UTC](https://forum.inductiveautomation.com/t/implementation-image-in-table/83506/8 "2023-12-28T08:31:20Z")
Before that, maybe I was wrong for understand the statement and I will revise my explanation. Where this statement must be binding? on Image component or column table? "system/images/myFolderName/" + {view.params.imageFileName} Then, currently I have table like this. No | Detail Issue | Level | 1. | Issue\_1 | Level\_1 | 2. | Issue\_2 | Level\_4 | 3. | Issue\_3 | Level\_3 | So I initiate for create condition to be named of image what should be source. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/3/13395207d329aa7bc3cc016e293af272b7148e67.png) But, I still don't know how source can change picture adjust level on the table ---
**Author:** ![David\_Stone](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/david_stone/32/79749_2.png) [@David\_Stone](https://forum.inductiveautomation.com/u/David_Stone)\ **Post date:** [December 28, 2023, 8:35am UTC](https://forum.inductiveautomation.com/t/implementation-image-in-table/83506/9 "2023-12-28T08:35:23Z")
At this stage I would suggest you complete the entire Inductive University training. > **[Learn Ignition at Your Own Pace](https://www.inductiveuniversity.com/)** > > Inductive University is a completely free online learning platform > to help you learn Ignition by Inductive Automation®, the most powerful SCADA software in the world This question is very base level knowledge for this platform, so you would be best to be learning the platform, perhaps then you will understand how the answers you have been given help you solve the problem. ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [December 28, 2023, 10:00am UTC](https://forum.inductiveautomation.com/t/implementation-image-in-table/83506/10 "2023-12-28T10:00:52Z")
> [@hisyam\_agung](#): > > Not found error but Image still can't display You need to debug. Here you can use the Image component Tooltip. - On the subview, click on the Image component. Set, `META.tooltip.enabled : true` and create a property binding on `META.tooltip.text`. Set the binding to, `this.props.source`. Save the project. Press F10 to launch it in the browser. Now hover over the table view to see what image path the view is getting. * * * Fixing the problem: First, read [Summary of Subviews](https://docs.inductiveautomation.com/display/DOC81/Displaying+a+Subview+in+a+Table+Row#DisplayingaSubviewinaTableRow-SummaryofSubviews). Read it twice! So, your subview will (on the first row) automatically receive, ```auto value + No : 1. + Detail Issue : Issue_1 + Level : Level_1 ``` Now on your subview the Image component should have a property binding, `view.params.value.level` Try that and if it doesn't work use the Tooltip trick to debug it. ---
**Author:** ![hisyam\_agung](https://avatars.discourse-cdn.com/v4/letter/h/9dc877/32.png) [@hisyam\_agung](https://forum.inductiveautomation.com/u/hisyam_agung)\ **Post date:** [January 2, 2024, 7:10am UTC](https://forum.inductiveautomation.com/t/implementation-image-in-table/83506/11 "2024-01-02T07:10:53Z")
Thank you for your advice. I finally applied the path icon and it worked.