Image in Markdown

Using Streamlit
10

Hi @fredzannarbor,

Thanks for bumping this thread up. I’ve created a Streamlit app that shows 2 ways to display images:

  1. Using st.image
  2. Using st.markdown

image
image1920×1351 65 KB

Demo app is available here https://dataprofessor-st-demo-image-markdown-streamlit-app-layled.streamlitapp.com/

Code is available on GitHub here GitHub - dataprofessor/st-demo-image-markdown

Code for implementing these is shown below:

  1. Using st.image 
from PIL import Image
img = Image.open('streamlit-logo-secondary-colormark-darktext.png')
st.image(img)
  1. Using st.markdown 

# img_to_bytes and img_to_html inspired from https://pmbaumgartner.github.io/streamlitopedia/sizing-and-images.html
import base64
from pathlib import Path
from utilities import load_bootstrap

load_bootstrap()

def img_to_bytes(img_path):
    img_bytes = Path(img_path).read_bytes()
    encoded = base64.b64encode(img_bytes).decode()
    return encoded
def img_to_html(img_path):
    img_html = "<img src='data:image/png;base64,{}' class='img-fluid'>".format(
      img_to_bytes(img_path)
    )
    return img_html

st.markdown(img_to_html('streamlit-logo-secondary-colormark-darktext.png'), unsafe_allow_html=True)
9 Likes