Image in Markdown

Hi everyone
For some reason, I have to use the image in markdown instead of st.image. However, it didn’t work. Do you know how can I do?

a = """Some text

![Cool Image](images/DWAFig22.png)

Some more text"""

st.markdown(a)

Hey @Berk_Demir,

Hard to say with just this snippet, do you have a link to a GitHub repo and can you screenshot the error you get when you try to use st.image()? (also please add the image code you use)

Happy Streamlit-ing!
Marisa

I am sorry, I think I wasn’t clear. I want to use markdown to show my image. not the st.image. The snippet I have sent you is a markdown text which is later on shwon in Streamlit as st.markdown(a). But, image does not appear.

It is shown as a broken link and the link is: http://localhost:4444/images/DWAFig22.png

Hello again. I have tried with online images and it works. However, images on my computer during localhost application does not work.

https://share.streamlit.io/akrolsmir/streamlit-snippet/main?snippet_id=3biYhJQ4

So you are trying to use markdown to display an image on your app that is stored in your local computer? Why do you want to use markdown instead of the st.image function?

What does your directory structure look like?

Based on the path you supply you have a /images/ folder in your current working directory and in that folder there should be a DWAFig22.png

can you screenshot the error you get?

1 Like

if i want to display a markdown file in streamlit, and the markdown file incloud local images , than the images can not display in streamlit web page.

Hi @Berk_Demir, @lt8cn ,

Images in st.markdown can only be loaded when served by a “server”. This is an example of the trick I use when displaying my README.md files in Streamlit apps, which relies on the code being in GitHub, i.e. the “server”. (The example is from https://github.com/asehmi/fastapi-wrapper-apiness.)

Change the list of images and the base URL for your GitHub repo. And it assumes markdown image statements appear in their own line in your .md file.

    if st.sidebar.checkbox('Readme', False):
        st.markdown('---')
        '''
        ### Readme :smile:
        '''
        with open('./README.md', 'r', encoding='utf-8') as f:
            readme_lines = f.readlines()
            readme_buffer = []
            images = [
                'images/fastapi_wrapper_demo.gif',
                'images/full_screenshot.png',
                'images/fastapi_wrapper_st_demo.gif',
                'images/fastapi_wrapper_installation.gif',
                'images/json_data.png',
                'images/html_table.png',
                'images/pbi_report_m_lang.png',
                'images/pbi_report.png',
                'images/apiness.png',
                'images/fastapi_testimonial.png'
            ]
            for line in readme_lines:
                readme_buffer.append(line)
                for image in images:
                    if image in line:
                        st.markdown(' '.join(readme_buffer[:-1]))
                        st.image(f'https://raw.githubusercontent.com/asehmi/fastapi-wrapper-apiness/main/{image}')
                        readme_buffer.clear()
            st.markdown(' '.join(readme_buffer))

(This code is from the line beginning here)

HTH,
Arvindra

2 Likes