Ignition Perspective - impossibile to display image

davee_s · January 27, 2025, 1:39pm

Hello guys,
I am using Ignition 8.1.45 with Perspective module.

I want to create a form that store an image into a MySQL blob field. I created a view and a NamedQuery to insert the image (by an upload file component), query is ok and data is inserted in the table.

When trying to display in an image component is impossible to show the image.
I created a view with image component, a NamedQuery that returns the data from the database table and then a transform script that convert to base64 the data.

Tried also to change the query to convert the image to base64 without using the transform but didn't work

dkhayes117 · January 27, 2025, 2:19pm

You need to install Phil's Blob Server Module or use the WebDev module. The blob server module is free, so I would go with that one, but if you have restrictions of 3rd party modules, go with webdev.

davee_s · January 27, 2025, 2:21pm

Hello @dkhayes117, we can't pruchase in this stage webdev module so I am trying to do on my own. Is Blob Server Module not using webdev module to works?

dkhayes117 · January 27, 2025, 2:25pm

The WebDev module is not required for the blob server module to work, and it is free.

Chris_Bingham · January 27, 2025, 3:26pm

Seems odd that you would need anything additional for this.
If you embed the same image directly to a Perspective view, then inspect the source property of the Image object, is there any difference between the value there and the result of your transform?

Chris_Bingham · January 27, 2025, 3:58pm

To elaborate, within the Perspective Upload component, I'm able to obtain the same Base64 encoding via the following script @ onFileReceived:

import base64
data = base64.b64encode(event.file.getBytes())
system.perspective.download(filename="base64.txt", data=data)

davee_s · January 28, 2025, 9:31am

Hello @Chris_Bingham added the b64encode before insert the image into SQL table.
This is the result when trying to display image

As you can see seems that the source is correct but no image is displayed. Keep in mind I have tested with a .png, maybe is this the problem?

Chris_Bingham · January 28, 2025, 9:44am

PNG should also work.
Though, you might try changing your expression to concatenate "data:image/png..."?

davee_s · January 28, 2025, 9:45am

Solved using @pturmel Blob Server https://forum.inductiveautomation.com/t/automation-professionals-blob-server-module

Kevin.Herron · January 28, 2025, 1:46pm

You say you stored a PNG but your content type is specified as “image/ jpeg”.

Have you tried “image/png” if that’s what the images are actually encoded as?

Edit: oops, as @Chris_Bingham just suggested

davee_s · January 28, 2025, 1:50pm

Yes I tried but didn't work with previous approach.
Now with Pturmel Blob Server works but I have another problem.
Seems that saving a photo taken from smartphone camera from Ignition Perspective app with 4Mb or more crashes Gateway. Is it possible that passing all ArrayBuffer to the NamedQuery is too much data?

Kevin.Herron · January 28, 2025, 1:52pm

Yes, very possible.

Hosting anything but small images should not be done via database.

michael.flagler · January 28, 2025, 1:54pm

Yep, if you need to store larger images, store them on a filesystem somewhere accessible from Ignition, then store a path or something in the DB to point to the actual file on the filesystem. This keeps the database smaller, and files are easier to manage.

pturmel · January 28, 2025, 1:54pm

Concur. NQ query caching can get you in trouble with RAM consumption, in particular.