How to create a text box with images in python

Hi everyone,

as part of a slicer extension I am working on I was hoping to create a section where I could place demonstration images and text to serve as sort of tutorial to people using the modules, something like the “Acknowledgement” section, but wasn’t sure which QT widget I should be using to achieve that result? Any advice would be appreciated!

The effect that I want is similar to this image:

The simplest is to use QTextEdit:

<p>This is an image:</p>
<p><img src="file:Markups-copy-paste.png" width="100"></p>
<p>Another image:</p>
<p><img src="file:ClippingFanMask.png" width="100"></p>
<p>And some more text.</p>

resourceFolder = "c:/tmp/20211221/"

resourceFiles = [

textEdit = qt.QTextEdit()
textDocument = textEdit.document
for resourceFile in resourceFiles:
    resourceFilePath = resourceFolder+resourceFile
    uri = qt.QUrl().fromLocalFile(resourceFile)
    image = qt.QImage()
    textDocument.addResource(qt.QTextDocument.ImageResource, uri, image)

For rendering complex tables, videos, using dynamic content (Javascript), etc. you can use the heavyweight slicer.qSlicerWebWidget(), which is a thin wrapper over QWebEngineView.

1 Like