1

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)
vvvvv
  • 25,404
  • 19
  • 49
  • 81
user14269252
  • 412
  • 4
  • 15
  • Does this answer your question? [Put logo and title above/on top of page navigation in sidebar of streamlit multipage app](https://stackoverflow.com/questions/73251012/put-logo-and-title-above-on-top-of-page-navigation-in-sidebar-of-streamlit-multi) – Jamiu S. Feb 23 '23 at 23:44

1 Answers1

2

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:

enter image description here

vvvvv
  • 25,404
  • 19
  • 49
  • 81