# How to load image in dashboard from ignition image browser in preview mode

**URL:** <https://forum.inductiveautomation.com/t/how-to-load-image-in-dashboard-from-ignition-image-browser-in-preview-mode/78993>\
**Category:** Ignition\
**Tags:** vision, scripting\
**Created:** [September 12, 2023, 6:40am UTC](https://forum.inductiveautomation.com/t/how-to-load-image-in-dashboard-from-ignition-image-browser-in-preview-mode/78993 "2023-09-12T06:40:41Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Riya\_Kaundal](https://avatars.discourse-cdn.com/v4/letter/r/3e96dc/32.png) [@Riya\_Kaundal](https://forum.inductiveautomation.com/u/Riya_Kaundal)\
**Post date:** [September 12, 2023, 6:40am UTC](https://forum.inductiveautomation.com/t/how-to-load-image-in-dashboard-from-ignition-image-browser-in-preview-mode/78993/1 "2023-09-12T06:40:41Z")

</div>

This is the scripting i have done for upload image buttton in Scada and also selected the image component named imgStudent. The image path is displaying in preview mode but the image that i am selecting is not get displayed in dashboard. I've given the attribute. Selected in 2nd last line of code but it's not working so which attribute should i give to display the image.

```auto
# Import the system module
import system
# Open the file dialog to select an image from the PC documents directory

filePath = system.file.openFile()

fileFilter="Image Files (*.png;*.jpg;*.jpeg) |*.png;*.jpg;*.jpeg; *)"

event.source.parent.getComponent('Mypath').text = filePath

#event.source.parent.getComponent('ImgStudent').source = filePath

imageBytes = system.file.readFileAsBytes(filePath)

imageComponent = event.source.parent.getComponent('ImgStudent').Selected
imageComponent = imageBytes

```

---

<div class="post-metadata">

**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\
**Post date:** [September 12, 2023, 7:54am UTC](https://forum.inductiveautomation.com/t/how-to-load-image-in-dashboard-from-ignition-image-browser-in-preview-mode/78993/2 "2023-09-12T07:54:47Z")

</div>

First of all, there is no need to do this:

> [@Riya\_Kaundal](#):
>
> `import system`

I don't believe any of this is needed:

> [@Riya\_Kaundal](#):
>
> ```auto
> fileFilter="Image Files (*.png;*.jpg;*.jpeg) |*.png;*.jpg;*.jpeg; *)"
> 
> #event.source.parent.getComponent('ImgStudent').source = filePath
> 
> imageBytes = system.file.readFileAsBytes(filePath)
> 
> ```

This code is just assigning the Selected property of the image component _[which I'm not sure exists]_ to the variable imageComponent, and then immediately overwriting it with imageBytes.

> [@Riya\_Kaundal](#):
>
> ```auto
> imageComponent = event.source.parent.getComponent('ImgStudent').Selected
> imageComponent = imageBytes
> 
> ```

Since this appears to be a file off of your local computer, I believe this is the code you need:

```auto
# Get the filepath for the image from the PC
filePath = system.file.openFile()

# Display the file path in a label by assigning it to the label's text property
event.source.parent.getComponent('Mypath').text = filePath

# Designate the file path as a file,
# and display the image in the image component 
# by assigning the designated file path to the image component's path property
event.source.parent.getComponent('ImgStudent').path = 'file:///' + filePath

```

---

<div class="post-metadata">

**Author:** ![Riya\_Kaundal](https://avatars.discourse-cdn.com/v4/letter/r/3e96dc/32.png) [@Riya\_Kaundal](https://forum.inductiveautomation.com/u/Riya_Kaundal)\
**Post date:** [September 12, 2023, 8:46am UTC](https://forum.inductiveautomation.com/t/how-to-load-image-in-dashboard-from-ignition-image-browser-in-preview-mode/78993/3 "2023-09-12T08:46:06Z")

</div>

I tried your code but still error is occurring.

```auto
Traceback (most recent call last):
  File "<event:actionPerformed>", line 8, in <module>
AttributeError: 'NoneType' object has no attribute 'path'

Ignition v8.1.28 (b2023060110)
Java: Azul Systems, Inc. 11.0.18

```

---

<div class="post-metadata">

**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\
**Post date:** [September 12, 2023, 9:08am UTC](https://forum.inductiveautomation.com/t/how-to-load-image-in-dashboard-from-ignition-image-browser-in-preview-mode/78993/4 "2023-09-12T09:08:12Z")

</div>

This must be wrong:

> [@justinedwards.jle](#):
>
> `event.source.parent.getComponent('ImgStudent').path`

Inside the script editor, highlight this part of the code:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/9/99e1a6d0feaac9d8487a26d8adc20735ba3f76e4.png)

Then, with it highlighted, click this button:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/8/8822e40de9cd85814056fcf9f0883c62eec445d2.png)

Finally, select the 'Image Path' property of your image component:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/8/08393255e3e4dd1f610f2522120acb8a27570a63.png)

This should correct your code.

---

<div class="post-metadata">

**Author:** ![Riya\_Kaundal](https://avatars.discourse-cdn.com/v4/letter/r/3e96dc/32.png) [@Riya\_Kaundal](https://forum.inductiveautomation.com/u/Riya_Kaundal)\
**Post date:** [September 12, 2023, 9:22am UTC](https://forum.inductiveautomation.com/t/how-to-load-image-in-dashboard-from-ignition-image-browser-in-preview-mode/78993/5 "2023-09-12T09:22:58Z")

</div>

The code is working now.  
Thanks!!