在 Streamlit 应用程序的侧边栏顶部插入图像

【问题标题】：Insert image on the top of side bar in stream lit app在 Streamlit 应用程序的侧边栏顶部插入图像
【发布时间】：2023-02-23 17:11:18
【问题描述】：

有没有办法在 Streamlit 应用程序的侧栏顶部插入图像？我使用了如下代码，但它在侧边栏的菜单下方显示了图像。

st.sidebar.image("st.png", width=70)

【问题讨论】：

热烈欢迎来到 SO。请尽量使用正确的大写字母，例如在你的标题、句子或“我”这个词的开头。这对你的读者来说是温和的。请阅读How to ask和Minimal Reproducible Example。然后用代码更新您的问题，向我们展示您到目前为止所做的尝试。

标签： python streamlit

【解决方案1】：

您可以使用 st.sidebar.markdown 和 unsafe_allow_html=True 嵌入 HTML 代码。

它会给：

import streamlit as st
import base64

with open("st.png", "rb") as f:
    data = base64.b64encode(f.read()).decode("utf-8")

    st.sidebar.markdown(
        f"""
        <div style="display:table;margin-top:-20%;margin-left:20%;">
            <img src="data:image/png;base64,{data}">
        </div>
        """,
        unsafe_allow_html=True,
    )

    st.sidebar.header("Part 1")
    st.sidebar.markdown("Here is some text")

它给：

【讨论】：