# Retrieve and Display a BLOB in Perspective

**URL:** <https://forum.inductiveautomation.com/t/retrieve-and-display-a-blob-in-perspective/27114>\
**Category:** Ignition\
**Created:** [August 2, 2019, 2:04pm UTC](https://forum.inductiveautomation.com/t/retrieve-and-display-a-blob-in-perspective/27114 "2019-08-02T14:04:01Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Joseph.Gardner](https://avatars.discourse-cdn.com/v4/letter/j/c4cdca/32.png) [@Joseph.Gardner](https://forum.inductiveautomation.com/u/Joseph.Gardner)\
**Post date:** [August 2, 2019, 2:04pm UTC](https://forum.inductiveautomation.com/t/retrieve-and-display-a-blob-in-perspective/27114/1 "2019-08-02T14:04:01Z")

</div>

I’m having trouble converting a blob to an image that I’m pulling from a SQL DB. I’m using an event action on a button to trigger a query to get the Blob. After that, I set the converted blob to the image component source. When executed, the source of the image changes but no image appears. Here’s my code:

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

	query = "SELECT image FROM imageStorage"
	bytes = system.db.runScalarQuery(query, "local")		
	image = ImageIO.read(ByteArrayInputStream(bytes))
	self.getSibling("image").props.source = image

```

---

<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 2, 2019, 2:29pm UTC](https://forum.inductiveautomation.com/t/retrieve-and-display-a-blob-in-perspective/27114/2 "2019-08-02T14:29:16Z")

</div>

Java swing image objects won’t work. You need a URL to the image. You probably need the WebDev module to do this efficiently (for now).

---

<div class="post-metadata">

**Author:** ![Joseph.Gardner](https://avatars.discourse-cdn.com/v4/letter/j/c4cdca/32.png) [@Joseph.Gardner](https://forum.inductiveautomation.com/u/Joseph.Gardner)\
**Post date:** [August 2, 2019, 6:14pm UTC](https://forum.inductiveautomation.com/t/retrieve-and-display-a-blob-in-perspective/27114/3 "2019-08-02T18:14:35Z")

</div>

After working with support, we ended up setting up an image path under the Ignition web server folder. This works but requires us to store the images on the machine that runs ignition though. Is it possible in perspective right now to have the database handle all of the storage? From what I understand this is possible in vision with the canvas component.

---

<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:** [August 2, 2019, 7:09pm UTC](https://forum.inductiveautomation.com/t/retrieve-and-display-a-blob-in-perspective/27114/4 "2019-08-02T19:09:22Z")

</div>

The better, more dynamic option is to use Webdev. Install the module, then in the designer set up a new Python endpoint with a name like `images` - this will ultimately “mount” the endpoint at `<gateway address>/system/webdev/<projectname>/images`.

In the `doGet` scripting event, run the (named) query you want to to fetch a particular image. You can get the path, ie `something.png` in a request to `images/something.png` via [`request['remainingPath']`](https://docs.inductiveautomation.com/display/DOC80/WebDev#WebDev-request%5B'remainingPath'%5D) - use that as a parameter in your (named) query to fetch the bytes for the appropriate image.

Then, return those bytes using the `bytes` return type:  
`return {"bytes": myQueryOutputVar}`  
And you should be able to use an appropriate URL directly in Perspective’s image component, or anywhere else you can use a direct image path.

---

<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:** [August 2, 2019, 10:10pm UTC](https://forum.inductiveautomation.com/t/retrieve-and-display-a-blob-in-perspective/27114/5 "2019-08-02T22:10:42Z")

</div>

If you don't have webdev you can do something like this.

> [@View Images from Database](http://forum.inductiveautomation.com/t/view-images-from-database/22626):
>
> Is there a way/will there be a way to directly display an image that is retrieved from a database? Right now the only way to display an image is by storing it in the gateway and specifying its path in a component. It would also be helpful to know how images will be stored when the future camera functionality is implemented.

---

<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:** [April 2, 2022, 7:26pm UTC](https://forum.inductiveautomation.com/t/retrieve-and-display-a-blob-in-perspective/27114/6 "2022-04-02T19:26:07Z")

</div>

New option for image display from a database:

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

{ /shameless plug }

---

<div class="post-metadata">

**Author:** ![jfan](https://avatars.discourse-cdn.com/v4/letter/j/e8c25b/32.png) [@jfan](https://forum.inductiveautomation.com/u/jfan)\
**Post date:** [May 16, 2022, 8:50pm UTC](https://forum.inductiveautomation.com/t/retrieve-and-display-a-blob-in-perspective/27114/7 "2022-05-16T20:50:12Z")

</div>

Hi,  
I am having trouble with this method. I am not exactly sure how the image component gets the source path from the web dev script that you mentioned here. Here is what I have in the doGet in the web dev  
` code

```
id = request['params'].get('id',2) 

MP = request['params'].get('MP',2) 

params = {'MP_ID':MP , 'id':id} 

byte = system.db.runNamedQuery('Section Info/Images for Before',params) 
return {'bytes': byte}

```

`

My namedQuery returns the varbinary(Max) as recommended based on the two parameters passed in.  
What does the doGet script actually return?

Thanks!

---

<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:** [May 16, 2022, 8:56pm UTC](https://forum.inductiveautomation.com/t/retrieve-and-display-a-blob-in-perspective/27114/8 "2022-05-16T20:56:40Z")

</div>

Can you reformat your code? (Hit the pencil icon below your post.) Select the code and then press the `</>` code formatting button. Check indentation - if there is any - before saving the edit.

---

<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:** [May 17, 2022, 1:54am UTC](https://forum.inductiveautomation.com/t/retrieve-and-display-a-blob-in-perspective/27114/9 "2022-05-17T01:54:59Z")

</div>

> [@jfan](#):
>
> My namedQuery returns the varbinary(Max) as recommended based on the two parameters passed in.

No, it doesn't. It returns a _ **Dataset** _ containing the rows returned by the Named Query. You have to retrieve the row/column value that actually has the bytes from the dataset.

---

<div class="post-metadata">

**Author:** ![josborn](https://avatars.discourse-cdn.com/v4/letter/j/4bbf92/32.png) [@josborn](https://forum.inductiveautomation.com/u/josborn)\
**Post date:** [May 17, 2022, 2:01am UTC](https://forum.inductiveautomation.com/t/retrieve-and-display-a-blob-in-perspective/27114/10 "2022-05-17T02:01:45Z")

</div>

This very moment i was coincidentally working on displaying blob images stored as varbinary as well. I just wanted to share, that @pturmel’s module is wonderful, very easy to use. Thanks Phil!

---

<div class="post-metadata">

**Author:** ![jfan](https://avatars.discourse-cdn.com/v4/letter/j/e8c25b/32.png) [@jfan](https://forum.inductiveautomation.com/u/jfan)\
**Post date:** [May 17, 2022, 12:46pm UTC](https://forum.inductiveautomation.com/t/retrieve-and-display-a-blob-in-perspective/27114/12 "2022-05-17T12:46:23Z")

</div>

I’ve got both methods working. Thanks for the help!

---

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [November 21, 2023, 11:44pm UTC](https://forum.inductiveautomation.com/t/retrieve-and-display-a-blob-in-perspective/27114/13 "2023-11-21T23:44:08Z")

</div>

Any reason you could think that this would work for pngs, etc. but not for SVGs?

Would this have to do with what image types the image component can take a byte array for? Because SVGs work fine when they come out of the image management feature, however they don't seem to be showing up for this approach.

---

<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 22, 2023, 12:01am UTC](https://forum.inductiveautomation.com/t/retrieve-and-display-a-blob-in-perspective/27114/14 "2023-11-22T00:01:44Z")

</div>

You might need to manually add a content-type header; without one `bytes` sends as `application/octet-stream` or something like that, and it might be that PNG works incidentally in most browser, but to ensure proper detection on the receiving end you probably want to use a more specific content type.

---

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [November 22, 2023, 2:34am UTC](https://forum.inductiveautomation.com/t/retrieve-and-display-a-blob-in-perspective/27114/15 "2023-11-22T02:34:32Z")

</div>

This was the problem! Thank you for the clarification.
