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

Posted 2023-02-18

【中文标题】Plotly Dash：如何在 html.Img 上方添加标题？

【英文标题】：Plotly Dash: how to add heading above 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()),
                           
                        )
                    ]
                           
        ),

【参考方案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()))
])