# Load image from DB into Image object

**URL:** <https://forum.inductiveautomation.com/t/load-image-from-db-into-image-object/12309>\
**Category:** Ignition\
**Created:** [October 31, 2016, 10:03pm UTC](https://forum.inductiveautomation.com/t/load-image-from-db-into-image-object/12309 "2016-10-31T22:03:26Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![abishur](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/abishur/32/9096_2.png) [@abishur](https://forum.inductiveautomation.com/u/abishur)\
**Post date:** [October 31, 2016, 10:03pm UTC](https://forum.inductiveautomation.com/t/load-image-from-db-into-image-object/12309/1 "2016-10-31T22:03:26Z")

</div>

I’ve successfully followed the examples on the forum to upload an image into an SQL database as a BLOB. I’ve also been able to create a custom property of type dataset on my window that successfully reads the BLOB into itself.

I’m stuck on the last step though, now that I’ve got this, how can I put an Image Display object on the screen and display the BLOB inside it?

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [October 31, 2016, 10:37pm UTC](https://forum.inductiveautomation.com/t/load-image-from-db-into-image-object/12309/2 "2016-10-31T22:37:20Z")

</div>

The following code will display a BLOB as the ‘icon’ on a Label component:

```python
from javax.swing import ImageIcon
from java.io import ByteArrayInputStream
from javax.imageio import ImageIO
from java.awt import Image
from java.net import URL
from java.io import File

image = # your readfileasbytes output
bais = ByteArrayInputStream(image)
bImageFromConvert = ImageIO.read(bais)
lbl3 = event.source.parent.getComponent('lblImage3')
boundWidth = lbl3.width
boundHeight = lbl3.height
originalWidth = bImageFromConvert.width
originalHeight = bImageFromConvert.height
newWidth = originalWidth
newHeight = originalHeight
if originalWidth > boundWidth:
	newWidth = boundWidth
	newHeight = (newWidth * originalHeight) / originalWidth
if newHeight > boundHeight:
	newHeight = boundHeight
	newWidth = (newHeight * originalWidth) / originalHeight
scaledImage = bImageFromConvert.getScaledInstance(newWidth,newHeight,Image.SCALE_SMOOTH)
lbl3.setIcon(ImageIcon(scaledImage))

```

---

<div class="post-metadata">

**Author:** ![abishur](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/abishur/32/9096_2.png) [@abishur](https://forum.inductiveautomation.com/u/abishur)\
**Post date:** [November 1, 2016, 3:00am UTC](https://forum.inductiveautomation.com/t/load-image-from-db-into-image-object/12309/3 "2016-11-01T03:00:22Z")

</div>

Hmm… one step forward one step back. When I run the script I get an error message stating

```auto
TypeError: java.io.ByteArrayInputStrea(): 1st arg can't be coerced to byte[]
```

Here’s the code I’m using to store the image, the column type is medium blob (and I’ve set max\_allowed\_packet=16M to accommodate the max possible size of a medium blob.

`
path = system.file.openFile()
if path != None:
	bytes = system.file.readFileAsBytes(path)
	system.db.runPrepUpdate("INSERT INTO assets (IMG, Num) VALUES (?,?)", [bytes, event.source.parent.Num])`

Then to read it back:

```python
from javax.swing import ImageIcon
from java.io import ByteArrayInputStream
from javax.imageio import ImageIO
from java.awt import Image
from java.net import URL
from java.io import File

image = system.db.runQuery("SELECT IMG FROM assets where Num=%d" % (event.source.parent.Num))
bais = ByteArrayInputStream(image)
bImageFromConvert = ImageIO.read(bais)
lbl3 = event.source.parent.getComponent('lblImage3')
boundWidth = lbl3.width
boundHeight = lbl3.height
originalWidth = bImageFromConvert.width
originalHeight = bImageFromConvert.height
newWidth = originalWidth
newHeight = originalHeight
if originalWidth > boundWidth:
   newWidth = boundWidth
   newHeight = (newWidth * originalHeight) / originalWidth
if newHeight > boundHeight:
   newHeight = boundHeight
   newWidth = (newHeight * originalWidth) / originalHeight
scaledImage = bImageFromConvert.getScaledInstance(newWidth,newHeight,Image.SCALE_SMOOTH)
lbl3.setIcon(ImageIcon(scaledImage))

```

---

<div class="post-metadata">

**Author:** ![jpark](https://avatars.discourse-cdn.com/v4/letter/j/a88e57/32.png) [@jpark](https://forum.inductiveautomation.com/u/jpark)\
**Post date:** [November 1, 2016, 3:16am UTC](https://forum.inductiveautomation.com/t/load-image-from-db-into-image-object/12309/4 "2016-11-01T03:16:02Z")

</div>

Try changing the line to:

```auto
image = system.db.runScalarPrepQUery("SELECT IMG FROM assets where Num=?",[event.source.parent.Num])
```

---

<div class="post-metadata">

**Author:** ![abishur](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/abishur/32/9096_2.png) [@abishur](https://forum.inductiveautomation.com/u/abishur)\
**Post date:** [November 1, 2016, 3:30am UTC](https://forum.inductiveautomation.com/t/load-image-from-db-into-image-object/12309/5 "2016-11-01T03:30:50Z")

</div>

[quote=“jpark”]Try changing the line to:

```auto
image = system.db.runScalarPrepQuery("SELECT IMG FROM assets where Num=?",[event.source.parent.Num])
```

![:prayer:](https://us1.discourse-cdn.com/inductiveautomation/original/1X/e5a7e3b63facc151ea73e3b45db7bdb3d4bdc316.gif ":prayer:") I am not worthy! That did the trick! I’ll look at the help files too, but what’s the difference between those two queries?

---

<div class="post-metadata">

**Author:** ![jonzzmith](https://avatars.discourse-cdn.com/v4/letter/j/c68b51/32.png) [@jonzzmith](https://forum.inductiveautomation.com/u/jonzzmith)\
**Post date:** [November 13, 2019, 9:49pm UTC](https://forum.inductiveautomation.com/t/load-image-from-db-into-image-object/12309/6 "2019-11-13T21:49:11Z")

</div>

Worked perfectly, thanks!

---

<div class="post-metadata">

**Author:** ![csanyia](https://avatars.discourse-cdn.com/v4/letter/c/48db29/32.png) [@csanyia](https://forum.inductiveautomation.com/u/csanyia)\
**Post date:** [April 2, 2020, 5:17pm UTC](https://forum.inductiveautomation.com/t/load-image-from-db-into-image-object/12309/7 "2020-04-02T17:17:05Z")

</div>

> [@abishur](#):
>
> path = system.file.openFile() if path != None: bytes = system.file.readFileAsBytes(path) system.db.runPrepUpdate("INSERT INTO assets (IMG, Num) VALUES (?,?)", [bytes, event.source.parent.Num])

I know it has been a while but what is the best way to auto load this image with a popup?

The way I got it set up is that a popup loads that passes the image location over, the script works when i click on a button, but to auto load? Best I can think of is a propertyChange?

---

<div class="post-metadata">

**Author:** ![abishur](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/abishur/32/9096_2.png) [@abishur](https://forum.inductiveautomation.com/u/abishur)\
**Post date:** [April 6, 2020, 6:54pm UTC](https://forum.inductiveautomation.com/t/load-image-from-db-into-image-object/12309/8 "2020-04-06T18:54:55Z")

</div>

can you give a little more details about what you’re trying to accomplish? If you want to display the image you can look at my second post (and the followup that fixes a code error) to show how to display images stored to a database. If you want that image in a popup… one option would be to pass the “num” (a variable I was using as an index) into the popup and have the script execute when the window first is displayed.

---

<div class="post-metadata">

**Author:** ![eric.petke](https://avatars.discourse-cdn.com/v4/letter/e/7feea3/32.png) [@eric.petke](https://forum.inductiveautomation.com/u/eric.petke)\
**Post date:** [August 27, 2021, 8:26am UTC](https://forum.inductiveautomation.com/t/load-image-from-db-into-image-object/12309/9 "2021-08-27T08:26:22Z")

</div>

Hello guys,  
is this also working in perspective or is it only for vision. because i can’t quite figure out how to make it work in my perspective project. More generally, is it possible to make my perspective image component display a BLOB image?

---

<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 27, 2021, 10:49am UTC](https://forum.inductiveautomation.com/t/load-image-from-db-into-image-object/12309/10 "2021-08-27T10:49:26Z")

</div>

> [@eric.petke](#):
>
> More generally, is it possible to make my perspective image component display a BLOB image?

> [@View Images from Database](https://forum.inductiveautomation.com/t/view-images-from-database/22626/4):
>
> If you’re asking for how to do this in Perspective: Currently, you would probably have to do it using a webdev script, that could either return the image directly or a correctly formatted base64 string, which would then be able to be used by Perspective’s image component (I’m pretty sure). There are some ways that we could improve this experience, but the hard problem to deal with is the fact that the browser can’t directly access the database - so we need to deliver the images to it from the g…

---

<div class="post-metadata">

**Author:** ![eric.petke](https://avatars.discourse-cdn.com/v4/letter/e/7feea3/32.png) [@eric.petke](https://forum.inductiveautomation.com/u/eric.petke)\
**Post date:** [August 27, 2021, 11:07am UTC](https://forum.inductiveautomation.com/t/load-image-from-db-into-image-object/12309/11 "2021-08-27T11:07:09Z")

</div>

Hello @JordanCClark,  
thank you for your response. Yes that is what i am asking.  
let say i use the **file Upload component** like on here: [Download and Upload Files - Ignition User Manual 8.1 - Ignition Documentation](https://docs.inductiveautomation.com/display/DOC81/Download+and+Upload+Files)  
The **onFileReceived event** will provide me the **bytes** of the uploaded image. being there, how do i display that into the image component (instead of saving it into the Database for instance)?

---

<div class="post-metadata">

**Author:** ![eric.petke](https://avatars.discourse-cdn.com/v4/letter/e/7feea3/32.png) [@eric.petke](https://forum.inductiveautomation.com/u/eric.petke)\
**Post date:** [August 30, 2021, 10:48am UTC](https://forum.inductiveautomation.com/t/load-image-from-db-into-image-object/12309/12 "2021-08-30T10:48:09Z")

</div>

@JordanCClark i was able to load the image into the image component after i formatted its bytes in to base64 strting. Thank you for the hint.

---

<div class="post-metadata">

**Author:** ![harigobu.gb](https://avatars.discourse-cdn.com/v4/letter/h/b77776/32.png) [@harigobu.gb](https://forum.inductiveautomation.com/u/harigobu.gb)\
**Post date:** [November 19, 2021, 9:15am UTC](https://forum.inductiveautomation.com/t/load-image-from-db-into-image-object/12309/13 "2021-11-19T09:15:51Z")

</div>

Hi Paul,

Thanks, I was able successfully implement the solution. However the image on label seems to be lighter comparatively the actual image in database is darker. Even when i download the image from the database through ignition i can view it is darker as actual. As this difference is easily notable. Which is not acceptable for our customer.

I would like understand the reason behind it and also please let us know Is there any way to view the actual image as it is or make it bit darker (increase contrast).?

Image in the behind is a vision window displaying image on label component.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/1/d1be3fa8f4bd297a2b32d4653b08f287bceff837.jpeg)

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [November 19, 2021, 3:29pm UTC](https://forum.inductiveautomation.com/t/load-image-from-db-into-image-object/12309/14 "2021-11-19T15:29:15Z")

</div>

Your image may have some different color space that Java isn’t processing correctly into SRGB for display as an image, or there may be something else going on.

You could try not scaling the image to the component size; then Java _should_ just emit the original image directly.

---

<div class="post-metadata">

**Author:** ![jantonevich](https://avatars.discourse-cdn.com/v4/letter/j/c6cbf5/32.png) [@jantonevich](https://forum.inductiveautomation.com/u/jantonevich)\
**Post date:** [July 15, 2022, 10:10pm UTC](https://forum.inductiveautomation.com/t/load-image-from-db-into-image-object/12309/15 "2022-07-15T22:10:59Z")

</div>

> [@View Images from Database](https://forum.inductiveautomation.com/t/view-images-from-database/22626/4):
>
> e asking for how to do this in Perspective: Currently, you would probably have to do it using a webdev script

Eric,  
i see that you got your image from the database to be displayed in your session. Would you mind sharing a sample of how? i have spent no time in the webdev and not sure were to begin as far as "organizing the bytes into base64" my images are getting into the DB into a long blob. Im just trying to get them out and shown on the screen.  
Any assistance would be appreciated!

jantonevich

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [July 15, 2022, 10:49pm UTC](https://forum.inductiveautomation.com/t/load-image-from-db-into-image-object/12309/16 "2022-07-15T22:49:51Z")

</div>

> [@jantonevich](#):
>
> Any assistance would be appreciated!

Did you see the last comment in that long topic?