# Display image stored as a byte array in database

**URL:** <https://forum.inductiveautomation.com/t/display-image-stored-as-a-byte-array-in-database/77982>\
**Category:** Ignition\
**Tags:** scripting, ignition81, perspective\
**Created:** [August 17, 2023, 9:56am UTC](https://forum.inductiveautomation.com/t/display-image-stored-as-a-byte-array-in-database/77982 "2023-08-17T09:56:44Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jay\_Makwana](https://avatars.discourse-cdn.com/v4/letter/j/e68b1a/32.png) [@Jay\_Makwana](https://forum.inductiveautomation.com/u/Jay_Makwana)\
**Post date:** [August 17, 2023, 9:56am UTC](https://forum.inductiveautomation.com/t/display-image-stored-as-a-byte-array-in-database/77982/1 "2023-08-17T09:56:44Z")

</div>

I get images as bytes by a file upload component and stored them into the database, now i want to fetch byte array and convert them into images. Is there any way or script to do that?  
Thank you in advance.

---

<div class="post-metadata">

**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:** [August 17, 2023, 10:06am UTC](https://forum.inductiveautomation.com/t/display-image-stored-as-a-byte-array-in-database/77982/2 "2023-08-17T10:06:13Z")

</div>

From what I've read on the forum you should be storing the images in a BLOB field.

> [@Automation Professionals' Blob Server Module](https://forum.inductiveautomation.com/t/automation-professionals-blob-server-module/57970):
>
> Automation Professionals is pleased to announce an alpha release of its new Blob Server Module. Available only for Ignition v8.1, here. The Blob Server Module provides a simple way to deliver images, PDF files, or other binary content from a database to your Perspective clients or other web applications. Without needing the WebDev module. All you need is a Named Query that has appropriate security settings and returns a single row with two columns: Content, and ContentType. Modest documentati…

---

<div class="post-metadata">

**Author:** ![Jay\_Makwana](https://avatars.discourse-cdn.com/v4/letter/j/e68b1a/32.png) [@Jay\_Makwana](https://forum.inductiveautomation.com/u/Jay_Makwana)\
**Post date:** [August 17, 2023, 10:14am UTC](https://forum.inductiveautomation.com/t/display-image-stored-as-a-byte-array-in-database/77982/3 "2023-08-17T10:14:22Z")

</div>

Thank you for your response,  
There is no other way to convert byte array into an image in ignition?

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [August 17, 2023, 1:25pm UTC](https://forum.inductiveautomation.com/t/display-image-stored-as-a-byte-array-in-database/77982/4 "2023-08-17T13:25:58Z")

</div>

> [@Jay\_Makwana](#):
>
> There is no other way to convert byte array into an image in ignition?

Of course. You can import the appropriate classes from Java to construct the Image from a Byte array.

Something like:

```auto
from javax.imageio import ImageIO
from java.io import ByteArrayInputStream

def bufferedImageFromBytes(bytes):
    return ImageIO.read(ByteArrayInputStream(bytes))

```

This will return a [BufferedImage](https://docs.oracle.com/javase/8/docs/api/java/awt/image/BufferedImage.html) object, you can then use the methods there to do what you need with the Image. That's a whole lot of work though, personally I would stick with the BLOBs.

---

<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:** [August 17, 2023, 1:48pm UTC](https://forum.inductiveautomation.com/t/display-image-stored-as-a-byte-array-in-database/77982/5 "2023-08-17T13:48:18Z")

</div>

> [@Jay\_Makwana](#):
>
> convert byte array into an image in ignition?

Arguably, the BLOB **is** the image. It certainly is the form most useful for display in Perspective.

If you want to process the image in some way before display (in Perspective), you will need to follow @lrose's advice in a WebDev script, writing the modified image back to a byte array before delivering to the browser. Or, perhaps, process the image right after upload and store the altered image to the DB as a blob.

One way or the other, BLOB (byte array) is the right format for sending the image around your network.

---

<div class="post-metadata">

**Author:** ![Jay\_Makwana](https://avatars.discourse-cdn.com/v4/letter/j/e68b1a/32.png) [@Jay\_Makwana](https://forum.inductiveautomation.com/u/Jay_Makwana)\
**Post date:** [August 18, 2023, 4:50am UTC](https://forum.inductiveautomation.com/t/display-image-stored-as-a-byte-array-in-database/77982/6 "2023-08-18T04:50:40Z")

</div>

Thank you **lrose** , I'll try this.

---

<div class="post-metadata">

**Author:** ![Jay\_Makwana](https://avatars.discourse-cdn.com/v4/letter/j/e68b1a/32.png) [@Jay\_Makwana](https://forum.inductiveautomation.com/u/Jay_Makwana)\
**Post date:** [August 18, 2023, 4:51am UTC](https://forum.inductiveautomation.com/t/display-image-stored-as-a-byte-array-in-database/77982/7 "2023-08-18T04:51:37Z")

</div>

Thank you for elaborating **pturmel** , that's really useful.

---

<div class="post-metadata">

**Author:** ![Aron\_Grzywaczewski](https://avatars.discourse-cdn.com/v4/letter/a/439d5e/32.png) [@Aron\_Grzywaczewski](https://forum.inductiveautomation.com/u/Aron_Grzywaczewski)\
**Post date:** [March 5, 2024, 10:38am UTC](https://forum.inductiveautomation.com/t/display-image-stored-as-a-byte-array-in-database/77982/8 "2024-03-05T10:38:39Z")

</div>

Hi Jay,

You can convert your byte stream to Base64 and display it as follows;

```auto
	from java.util import Base64
	b64Image = Base64.getEncoder().encodeToString(bytesStreamImage)
	self.getSibling("Image").props.source = "data:image/png;base64," + b64Image

```

---

<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:** [March 5, 2024, 12:57pm UTC](https://forum.inductiveautomation.com/t/display-image-stored-as-a-byte-array-in-database/77982/9 "2024-03-05T12:57:57Z")

</div>

Using data urls with base64 is terribly inefficient--bogs down both Perspective on the gateway and the client browser.

Deliver images as image **bytes** via URL.
