Href on image

Hello all,

How do I hyperlink when user clicks on an image?
My code to display my gif is the following:
f’cat gif’,

thanks for your help :slight_smile:

Can you try:

    <a href="">
        <img src="" />

thanks @GokulNC. however this only shows the link but not the image (the image is stored locally).
any idea?

image ='/Path to img')
    <a href=">
        <img src="data:image/gif;base64,{data_url}" alt="cat gif"/>

Supporting image with anchor href is a very basic requirement but unfortunately missing, so please file an issue in StreamLit GitHub repo for this feature request.

For now, this should help for local images:

import streamlit as st
import os
import base64

def get_base64_of_bin_file(bin_file):
    with open(bin_file, 'rb') as f:
        data =
    return base64.b64encode(data).decode()

def get_img_with_href(local_img_path, target_url):
    img_format = os.path.splitext(local_img_path)[-1].replace('.', '')
    bin_str = get_base64_of_bin_file(local_img_path)
    html_code = f'''
        <a href="{target_url}">
            <img src="data:image/{img_format};base64,{bin_str}" />
    return html_code

gif_html = get_img_with_href('tenor.gif', '')
st.markdown(gif_html, unsafe_allow_html=True)

thanks @GokuINC. It perfectly works=)

1 Like