Plotly Dash：如何在 html.Img 上方添加标题？答案

【问题标题】：Plotly Dash: how to add heading above html.Img?Plotly Dash：如何在 html.Img 上方添加标题？
【发布时间】：2022-01-15 16:44:33
【问题描述】：

我需要在图像上方添加标题，但目前还没有找到将标题置于图像上方的方法。有没有人提示如何获得图像上方的标题？您会看到我尝试添加了 html.Br 行，但引发了错误消息。准确地说：标题应该在图像上方（它是标题），而不是重叠。

代码是：

    #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()),
                           
                        )
                    ]
                           
        ),

【问题讨论】：

标签： python html plotly plotly-dash

【解决方案1】：

您将标题和图像放置在 Row 组件中，当您想要内联子项时使用该组件。将您的 Row 组件替换为 Block 组件。

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

【讨论】：