[Python] How to display an image in a GUI using Trame, Vuetify

I am new to Trame and Vuetify. I need to show an image in the GUI. The GUI would run on a localhost. My MWE is given below:

from trame.app import get_server
from trame.widgets import html, vuetify, vtk as vtk_widgets
from trame.ui.vuetify import SinglePageLayout
import os

# -----------------------------------------------------------------------------
# Trame setup
# -----------------------------------------------------------------------------

server = get_server(client_type="vue2")
state, ctrl = server.state, server.controller

#################
state.trame__title = "Test"

with SinglePageLayout(server) as layout:
layout.icon.click = "$refs.view.resetCamera()"

with layout.content:
with vuetify.VContainer(fluid=True, classes="pa-0 fill-height d-flex flex-row"):
with vuetify.VCol(style="max-width: 20vw; min-width: 200px;"):
with vuetify.VContainer():
print("Image exists:", os.path.exists("assets/my_test_image.png"))
print("Image exists:", os.path.exists("assets/my_test_image.png"))
html.Img(
src="/assets/my_test_image.png",
style=(
"max-width: 100%; "
"margin-top: 20px; "
"display: block;"
)
)
# -----------------------------------------------------------------------------
# Main
# -----------------------------------------------------------------------------

if __name__ == "__main__":
server.start()


Question: In the program above, I want to display an image called my_test_image.png which is already present in the assets folder. The program runs but the image is not displayed (rather a borken image icon is displayed). As a sanity check, I have put the print statement to check if the image exists and I am obtained **Image exists: True**. How do I display the image in the gui?

Continue reading...