Peter Kopp · Apr 21, 2016

Display images on disk in an <image> control.

Good afternoon, I have image files stored on disk. I would like to display those images in an <image> control as the end user clicks on rows in a tablepane. I already do this with image data stored in a cache database:

s imageComp = %page.%GetComponentById("ImgTab"_tLdCnt)
s imageComp.disabled=0
s tId=rsId.Get("ID")
s tPageObj=##class(My.PageObj).%OpenId(tId)
s oid=tPageObj.ImageBLOB.%Oid()
s encryptedOid=..Encrypt(oid)
s imageComp.src="%25CSP.StreamServer.cls?STREAMOID="_encryptedOid


In this project, I can displayed the image if I set the scrDisabled, scrMissing or src attributes to the full path and file name of the image in XData Contents.

However, the dynamic loading of the <image> control as the end user clicks on rows in a tablepane does not work.


I have tried setting the src attribute directly:

s imageComp=%page.%GetComponentById("ImgTab1")
s imageComp.disabled=1

s imageComp.src="E:\tmp\MyImage.jpg"


I have tried setting the src attriute using streams:


//s stream=##class(%FileCharacterStream).%New()
//s stream=##class(%Stream.FileCharacter).%New()
//s stream=##class(%Stream.FileBinary).%New()
//s stream.Filename="E:\tmp\MyImage.jpg"
//d stream.FilenameSet("E:\tmp\MyImage.jpg")
//d stream.LinkToFile("E:\tmp\MyImage.jpg")
s imageComp.src=stream



//s oid=##class(%FileCharacterStream).GetStreamIdForFile("E:\tmp\MyImage.jpg")
//s encryptedOid=..Encrypt(oid)
//s imageComp.src="%25CSP.StreamServer.cls?STREAMOID="_encryptedOid


In addition, the documentation states that This class(%FileCharacterStream) is deprecated in favor of %Stream.FileCharacter.

So I tried:


//s stream=##class(%Stream.FileCharacter).%New()
s stream=##class(%Stream.FileBinary).%New()
//s rc=stream.FilenameSet("E:\tmp\MyImage.jpg")
//d stream.LinkToFile(“E:\tmp\MyImage.jpg”)
s stream.Filename=("E:\tmp\MyImage.jpg")
//s stream.StreamFormatWrite=0
s imageComp.src=stream


I appreciate any and all feedback. Thank you.

0 599
Discussion (2)2
Log in or sign up to continue

You're really close; the key is using the stream's OID (from %Oid()). Here's a simple example; you can substitute any appropriate file path.

Class Demo.DynamicImage Extends

/// This XML block defines the contents of this page.
XData Contents [ XMLNamespace = "" ]
<page xmlns="" title="">
<image id="myImage" src="" />
<button onclick="zenPage.ChangeImage(zen('myImage'))" caption="Dynamically Change Image" />

ClassMethod ChangeImage(pImage As %ZEN.Component.image) [ ZenMethod ]
    Set tStream = ##class(%Stream.FileBinary).%New()
    Do tStream.LinkToFile(##class(%File).ManagerDirectory()_"..\CSP\broker\images\einstein.jpg")
    Set tOID = ..Encrypt(tStream.%Oid())
    Set pImage.src = "%25CSP.StreamServer.cls?STREAMOID="_tOID


I'm really curious what that image is doing in /csp/broker/...

Thank you for the assist!