Plotly Dash: how to add heading above html.Img?-CodePudding

I need to add a heading above an image but have not found a way to get the heading above the image so far. Does anybody have a hint how to get the heading above the image? You see that I tried with an added html.Br line but that raised an error message. To be precise: the heading should be above the image (it´s a heading), not overlapping.

The code is:

    #https://dash.plotly.com/annotations
ddk.Row(
    style={'height': 'calc(20vh - 80px)'},
           children=[html.H5("I want to be above this Img"),
                     #html.Br(),
                       html.Img(
                           src='data:image/png;base64,{}'.format(encoded_image.decode()),
                           
                        )
                    ]
                           
        ),

CodePudding user response：

You are placing your heading and image in a Row component which is used when you want to have inline children. Replace your Row component with a Block component.

ddk.Block(children=[
    html.H5("I want to be above this Img"),
    html.Img(src='data:image/png;base64,{}'.format(encoded_image.decode()))
])