# View Images from Database **URL:** \ **Category:** Ignition Early Access\ **Created:** [February 15, 2019, 9:52pm UTC](https://forum.inductiveautomation.com/t/view-images-from-database/22626 "2019-02-15T21:52:39Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![nburt](https://avatars.discourse-cdn.com/v4/letter/n/2bfe46/32.png) [@nburt](https://forum.inductiveautomation.com/u/nburt)\ **Post date:** [February 15, 2019, 9:52pm UTC](https://forum.inductiveautomation.com/t/view-images-from-database/22626/1 "2019-02-15T21:52:39Z")
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. ---
**Author:** ![craigb](https://avatars.discourse-cdn.com/v4/letter/c/9f8e36/32.png) [@craigb](https://forum.inductiveautomation.com/u/craigb)\ **Post date:** [February 15, 2019, 10:55pm UTC](https://forum.inductiveautomation.com/t/view-images-from-database/22626/2 "2019-02-15T22:55:25Z")
You can load a blob from a database into a paintable canvas. I don’t have the code to hand but can post it later, do a search and I’m sure it will come up as that’s how I found it. ---
**Author:** ![KathyApplebaum](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kathyapplebaum/32/7261_2.png) [@KathyApplebaum](https://forum.inductiveautomation.com/u/KathyApplebaum)\ **Post date:** [February 15, 2019, 11:40pm UTC](https://forum.inductiveautomation.com/t/view-images-from-database/22626/3 "2019-02-15T23:40:12Z")
Here’s an example from the forum. As craigb said, searching the forum can lead to lots of examples: [Scale image in canvas](http://forum.inductiveautomation.com/t/scale-image-in-canvas/8104) ---
**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:** [February 15, 2019, 11:44pm UTC](https://forum.inductiveautomation.com/t/view-images-from-database/22626/4 "2019-02-15T23:44:16Z")
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 gateway in a format it can understand. ---
**Author:** ![jpark](https://avatars.discourse-cdn.com/v4/letter/j/a88e57/32.png) [@jpark](https://forum.inductiveautomation.com/u/jpark)\ **Post date:** [February 16, 2019, 6:06pm UTC](https://forum.inductiveautomation.com/t/view-images-from-database/22626/5 "2019-02-16T18:06:27Z")
You can create a named query that brings back the image bytes. If you are using MySQL, convert it to base64 in the query with TO\_BASE64(ImageData). Bind the source property of the perspective image component to the named query. Do the following script transform: ```auto b64Image = "data:imagef;base64,%s"%value return b64Image ``` ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/d/d6fdc33843a6e0861bfa2a8011d8c5c1df5cb9c8.png) ---
**Author:** ![nburt](https://avatars.discourse-cdn.com/v4/letter/n/2bfe46/32.png) [@nburt](https://forum.inductiveautomation.com/u/nburt)\ **Post date:** [February 21, 2019, 3:52pm UTC](https://forum.inductiveautomation.com/t/view-images-from-database/22626/6 "2019-02-21T15:52:48Z")
Thanks @jpark this did the trick! I had to find a different way to convert to base64 as I’m using sql server but your reply had a lot of detail which really helped me figure it out ---
**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 5, 2019, 3:21pm UTC](https://forum.inductiveautomation.com/t/view-images-from-database/22626/8 "2019-08-05T15:21:01Z")
Note that there is one _heavy_ caveat to Jae’s method - significantly large images will dramatically slow down page loads, and can lead to issues in the designer, as well. Image components with true URLs will be automatically asynchronously loaded by modern web browsers, in a way that `image;data` encoded images cannot be. For some small images, it should be fine, but be aware of that if you’re building your entire project on it. ---
**Author:** ![djones](https://avatars.discourse-cdn.com/v4/letter/d/43a26b/32.png) [@djones](https://forum.inductiveautomation.com/u/djones)\ **Post date:** [October 17, 2019, 11:55am UTC](https://forum.inductiveautomation.com/t/view-images-from-database/22626/9 "2019-10-17T11:55:19Z")
Would you have an example of having the webdev script to to create an image data from the database and return an image. I am fine with the SQL part of this. I have vision projects that are returning image data. I am new to the WebDev module and unsure how to return the data. I assume it is a doGet request? ---
**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 17, 2019, 3:22pm UTC](https://forum.inductiveautomation.com/t/view-images-from-database/22626/10 "2019-10-17T15:22:17Z")
The webdev script is just `return {'bytes': }`, where your byte array is populated via whatever mechanism you prefer to query the database (ie, `system.db.runNamedQuery`, `system.db.runPrepQuery`, etc). ---
**Author:** ![lwood](https://avatars.discourse-cdn.com/v4/letter/l/977dab/32.png) [@lwood](https://forum.inductiveautomation.com/u/lwood)\ **Post date:** [December 12, 2019, 8:36pm UTC](https://forum.inductiveautomation.com/t/view-images-from-database/22626/12 "2019-12-12T20:36:06Z")
How did you convert to 64 with sql server? I’m trying: ```auto SELECT CAST('' as xml).value('xs:base64Binary(sql:column("lotphotos.photo"))', 'varbinary(MAX)') FROM lotPhotos WHERE id = :photoID ``` then the script transform: ```auto b64Image = "data:imagef;base64,%s"%value return b64Image ``` And only having luck locking up my designer ---
**Author:** ![nburt](https://avatars.discourse-cdn.com/v4/letter/n/2bfe46/32.png) [@nburt](https://forum.inductiveautomation.com/u/nburt)\ **Post date:** [December 12, 2019, 9:34pm UTC](https://forum.inductiveautomation.com/t/view-images-from-database/22626/13 "2019-12-12T21:34:20Z")
Try changing varbinary(max) to varchar(MAX). I think that will convert that result to varchar type which is what you want for when you convert it to the base64 string. > [@lwood](#): > > 'varbinary(MAX)' ---
**Author:** ![tmahaffey](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tmahaffey/32/30949_2.png) [@tmahaffey](https://forum.inductiveautomation.com/u/tmahaffey)\ **Post date:** [April 15, 2020, 7:31pm UTC](https://forum.inductiveautomation.com/t/view-images-from-database/22626/14 "2020-04-15T19:31:55Z")
Just found this thread and I m wondering why using python to encode the bytes into base 64 wasn’t discussed. Maybe somewhere else on the forum. [https://stackabuse.com/encoding-and-decoding-base64-strings-in-python/](https://stackabuse.com/encoding-and-decoding-base64-strings-in-python/) ---
**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 15, 2020, 8:17pm UTC](https://forum.inductiveautomation.com/t/view-images-from-database/22626/15 "2020-04-15T20:17:36Z")
Probably because it wasn’t needed, if the DB could do it for you. The crux of the discussion was the potential performance problems with base64 encode images, which would be avoided by serving the images via the WebDev module (direct byte stream). ---
**Author:** ![jordan.burnes](https://avatars.discourse-cdn.com/v4/letter/j/51bf81/32.png) [@jordan.burnes](https://forum.inductiveautomation.com/u/jordan.burnes)\ **Post date:** [September 23, 2020, 9:08pm UTC](https://forum.inductiveautomation.com/t/view-images-from-database/22626/16 "2020-09-23T21:08:23Z")
Do you know how this would be accomplished in Vision? I am able to save my images using the file uploader in perspective, but then I want to display those images in the vision portion of the application, which I can’t seem to find a way to do. ---
**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:** [September 24, 2020, 12:35am UTC](https://forum.inductiveautomation.com/t/view-images-from-database/22626/17 "2020-09-24T00:35:30Z")
The Paintable Canvas component is the most flexible tool to display arbitrarily-encoded images. Start here: > [@Database and Paintable Canvas Refresh](http://forum.inductiveautomation.com/t/database-and-paintable-canvas-refresh/21865/2): > > Where is this code? In the paint method? If so, break it up so your db query runs separately (on some propertyChange) to obtain and set the client property. Say, on your Documents table, have a propertyChange that does most of the work, but only on image change, like so: if event.propertyName == 'id': from javax.imageio import ImageIO from java.io import ByteArrayInputStream blob = system.db.runPrepQuery(“SELECT file FROM magna\_silao.documents where id= ?”, [event.newValue]) bytes = blo… Other related topics: [http://forum.inductiveautomation.com/search?q=paintable%20canvas%20imageio](http://forum.inductiveautomation.com/search?q=paintable%20canvas%20imageio) ---
**Author:** ![Ibere.Matias](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ibere.matias/32/19848_2.png) [@Ibere.Matias](https://forum.inductiveautomation.com/u/Ibere.Matias)\ **Post date:** [December 3, 2020, 7:25pm UTC](https://forum.inductiveautomation.com/t/view-images-from-database/22626/18 "2020-12-03T19:25:36Z")
Hi @nburt. I did the conversion using NamedQuery: select cast(’’ as xml).value(‘xs:base64Binary(sql:column(“Table.ColVarBinaryMax”))’, ‘varchar(max)’) as img from Pergunta where idTable = :idT - [ColVarBinaryMax] VARBINARY(max) NULL, on SQL Server. Then I execute the function on a button \>\> image3 = system.db.runNamedQuery(“QueryImg”,{“idP”: 14}) system.perspective.print(image3) self.getSibling(“Image”).props.source = “data:imagef;base64,%s”%image3 (“Image”) is my component in the view on perspective Did not work. Can you help me. Thanks ---
**Author:** ![ATSFareeth](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@ATSFareeth](https://forum.inductiveautomation.com/u/ATSFareeth)\ **Post date:** [March 1, 2021, 10:20am UTC](https://forum.inductiveautomation.com/t/view-images-from-database/22626/19 "2021-03-01T10:20:18Z")
This needs to be part of the image component section in the documentation. ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [February 11, 2022, 6:29am UTC](https://forum.inductiveautomation.com/t/view-images-from-database/22626/20 "2022-02-11T06:29:37Z")
> [@jpark](#): > > `base64` Hi Jpark I'm using SQLite for this so I wonder how to convert it to TO\_BASE64. Do you know how to do this? ---
**Author:** ![Baris.kose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/baris.kose/32/18991_2.png) [@Baris.kose](https://forum.inductiveautomation.com/u/Baris.kose)\ **Post date:** [February 11, 2022, 7:19am UTC](https://forum.inductiveautomation.com/t/view-images-from-database/22626/21 "2022-02-11T07:19:12Z")
Hi Nader, it is useful for converting it to TO\_BASE64. ```auto >>> import base64 >>> encoded = base64.b64encode(b'data to be encoded') >>> encoded b'ZGF0YSB0byBiZSBlbmNvZGVk' >>> data = base64.b64decode(encoded) >>> data b'data to be encoded' ``` ---
**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:28pm UTC](https://forum.inductiveautomation.com/t/view-images-from-database/22626/22 "2022-04-02T19:28:35Z")
A new solution that requires no scripting at all: > [@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 } [Next page](https://forum.inductiveautomation.com/t/view-images-from-database/22626.md?page=2)