# Display Image

**URL:** <https://forum.inductiveautomation.com/t/display-image/6401>\
**Category:** Ignition\
**Created:** [May 7, 2013, 6:35pm UTC](https://forum.inductiveautomation.com/t/display-image/6401 "2013-05-07T18:35:47Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![r\_beall](https://avatars.discourse-cdn.com/v4/letter/r/90ced4/32.png) [@r\_beall](https://forum.inductiveautomation.com/u/r_beall)\
**Post date:** [May 7, 2013, 6:35pm UTC](https://forum.inductiveautomation.com/t/display-image/6401/1 "2013-05-07T18:35:47Z")

</div>

I’m sure this has been answered before but I couldn’t find it via search.

I know how to upload an image to my SQL Server yet, not sure what the best way to display that image is? It’s in Varbinary(max) format

I’m not sure if there’s already something in place for this or if I need to build it out, not a big deal either way.

Thanks

---

<div class="post-metadata">

**Author:** ![Carl.Gould](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/carl.gould/32/7262_2.png) [@Carl.Gould](https://forum.inductiveautomation.com/u/Carl.Gould)\
**Post date:** [May 22, 2013, 11:34pm UTC](https://forum.inductiveautomation.com/t/display-image/6401/2 "2013-05-22T23:34:28Z")

</div>

You’ll have to build it. I’ve found that the best way to do this is using the paintable canvas component. Here’s an example script you would put in it’s paint event:

[code]g = event.graphics  
name = event.source.ImageName

cachedName = event.source.getClientProperty(“img-bytes-cached-name”)  
bytes = event.source.getClientProperty(“img-bytes-cached”)  
if name!=cachedName or not bytes:  
# Image not cached - load from database  
bytes = system.db.runScalarQuery(“SELECT data FROM image\_test WHERE imgname=’%s’”%name)  
event.source.putClientProperty(“img-bytes-cached”,bytes)  
event.source.putClientProperty(“img-bytes-cached-name”,name)

if bytes:  
from javax.imageio import ImageIO  
from [java.io](http://java.io) import ByteArrayInputStream  
image = ImageIO.read(ByteArrayInputStream(bytes))  
g.drawImage(image,0,0,event.source)[/code]

To get this to work, you’ll want to put a custom property on the component called “ImageName”, and modify the query inside that script to work with your table.