Local Image Button

I am trying to insert an image with hyperlink to another website. The image is stored locally in same directory as app.py file.
I tried to do it using pure markdown and html.
Pure Markdown Code:
HTML Code:
html = " <a href="site.com"> <img src="image.png"> </a> "' 'st.markdown(html, unsafe_allow_html=True)

In both cases the browser cannot find the image because it is searching for: localhost:8501/image.png instead of my app.py directory.
I tried to add full path ‘C://…’ too but the problem persists.
Using the st.image function it is not possible to add the hyperlink right?
I had replaced the ‘image.png’ with an online image URL, and that is fine. But really needed to have the image locally.

Any suggestions?

As you rightly pointed out it’s not working because the file you are looking for isn’t being hosted by the server, Not sure if there’s a better way but I think you have two options here-

  1. Generate base64 of the image and put it in src
    Check this link for reference.
  2. If you have a lot of static content consider hosting it on a separate server maybe. then you can use the URL for that static content by the server. ( Just python -m http.server or nginx should do the job )

Hope it helps ! :slight_smile:


Oh, I like the base64 idea. Will take a shot on it. Thank you :wink:

Did it work?
I am encountering the same issue, and have not been able to find a solution yet.

It worked, here is a sample code:

html = f"<a href='{link}'><img src='data:image/png;base64,{image_base64}'></a>"
st.markdown(html, unsafe_allow_html=True)

It works! thank you so much, I’ve been struggling till I found this. :pray: