Insert image on the top of side bar in stream lit app

Question

Is there a way to insert image on the top of side bar in Streamlit app? I used the code as follows but it shows the image below the menu in sidebar.

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

Answer 1

You can embed HTML code using st.sidebar.markdown and unsafe_allow_html=True.

It would give:

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}" width="100" height="150">
        </div>
        """,
        unsafe_allow_html=True,
    )

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

It gives: