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?