# Dynamic image embedding and display from SQL Query using transform

**URL:** <https://forum.inductiveautomation.com/t/dynamic-image-embedding-and-display-from-sql-query-using-transform/86817>\
**Category:** Ignition\
**Created:** [March 5, 2024, 11:32am UTC](https://forum.inductiveautomation.com/t/dynamic-image-embedding-and-display-from-sql-query-using-transform/86817 "2024-03-05T11:32:50Z")\
**Posts on this page:** 8\
**Page:** 1

<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, 11:32am UTC](https://forum.inductiveautomation.com/t/dynamic-image-embedding-and-display-from-sql-query-using-transform/86817/1 "2024-03-05T11:32:50Z")

</div>

Hi All,

I want to test the following concept.

I have a database table with the images stored in a column as bytestream.

I want to be able to return the images from the database into ignition table, but I want to display the images in the table.

Is it possible to

add a transform in my query that adds the image component as follows in each table row and link it's source property to the image bytestream column in the table?

```auto
{
	  "type": "palette-item",
	  "payload": {
	    "componentId": "ia.display.image",
	    "variantId": ""
	  }
}

```

at the moment, I am returning the photo bytestream like this 😃 , but I don't want to display that value in the table:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/8/4814deaf696c6ddf510012b69b86f5e89b2c4be2.png)

Can I use the below transform script that adds the image in the column and links the source to the byte stream data?

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/b/cbeda00b11c588f883ed8235af5e7a400c50fb75.png)

---

<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, 1:01pm UTC](https://forum.inductiveautomation.com/t/dynamic-image-embedding-and-display-from-sql-query-using-transform/86817/2 "2024-03-05T13:01:36Z")

</div>

This task is perfect for my Blob Server module. You'd include the photoID (not bytes) as a column in the table, and set that column to render with a view. In the embedded view, concatenate the base URL for the named query with the image ID parameter to produce the complete URL for the actual Image. The table is fast because it contains very little raw data. The images load quickly because the browser can efficiently handle image bytes.

---

<div class="post-metadata">

**Author:** ![jespinmartin1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jespinmartin1/32/57175_2.png) [@jespinmartin1](https://forum.inductiveautomation.com/u/jespinmartin1)\
**Post date:** [March 5, 2024, 2:00pm UTC](https://forum.inductiveautomation.com/t/dynamic-image-embedding-and-display-from-sql-query-using-transform/86817/3 "2024-03-05T14:00:42Z")

</div>

Auto table cell render would not be capable to property decode by itself. Use an embedded view image id parameterized. This view should have a markdown html enabled and your image coming from a query and base64 encoded. Ones ready, use this view as column render for the table. I would avoid loading the binary within the table as shown in your post.

---

<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, 2:09pm UTC](https://forum.inductiveautomation.com/t/dynamic-image-embedding-and-display-from-sql-query-using-transform/86817/4 "2024-03-05T14:09:29Z")

</div>

> [@jespinmartin1](#):
>
> your image coming from a query and base64 encode

This is very slow compared to directly delivering the bytes of the Image with the (free) Blob Server module. Suitable (barely) only if 3rd party modules are forbidden in your situation. (Your advice and my advice are identical, but for the URL in the cell render view.)

---

<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, 3:48pm UTC](https://forum.inductiveautomation.com/t/dynamic-image-embedding-and-display-from-sql-query-using-transform/86817/5 "2024-03-05T15:48:00Z")

</div>

Do you mean a database with the image URLs and the local repository where the images are stored on a drive? Meaning you would only access the database table with images to get the image URL?

---

<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, 4:03pm UTC](https://forum.inductiveautomation.com/t/dynamic-image-embedding-and-display-from-sql-query-using-transform/86817/6 "2024-03-05T16:03:26Z")

</div>

No, the Blob Server module requires the image data to be in a BLOB column within the database. (Datatype names for "blob" vary by brand of DB. But something that accepts and returns a java byte array.)

If you intend to use files in the gateway filesystem, use the WebDev module.

---

<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, 6:05pm UTC](https://forum.inductiveautomation.com/t/dynamic-image-embedding-and-display-from-sql-query-using-transform/86817/7 "2024-03-05T18:05:30Z")

</div>

Yeah, the data type in the MS SQL is varbinary. So in the BLOB Server Module do you convert the byte stream to display it? Where is the URL pointing to?

Are there any project examples available for this?

I am used to [MVC.Net](http://MVC.Net) where I would pass the data to the browser with the SP on the database side that has Partition By clause and displays the number of thumbnails per page as you prefer to display it.  
This same solution is used on websites like Amazon or Ebay.  
My understanding is that the Ignition SCADA uses web technology in it's Perspective module, so I was hoping that this can be used in the same way.

I think I will need to check your BLOB module, thanks.

---

<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, 6:24pm UTC](https://forum.inductiveautomation.com/t/dynamic-image-embedding-and-display-from-sql-query-using-transform/86817/8 "2024-03-05T18:24:36Z")

</div>

If you read through this topic, the discussion and examples should answer your questions:

> [@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…
