How streamlit stores media

🎈 Using Streamlit
1

when i upload a photo and then use st.image() the src of the html img tag is a long string of hexadecimal characters. I’m building a system where i need to know the exact url. is there an easy way to predict it, perhaps a hash or function in the source code ? or is my only option to web scrape my own app ?

2

Hi @ninth,

Here’s the image_to_url() function that st.image uses to derive the url of an image: streamlit/image.py at 949d97f37bde0948b57a0f4cab7644b61166f98d · streamlit/streamlit · GitHub

I put together an example app that accepts an uploaded image, and uses the image_to_url() function from streamlit.elements.image to return the image url:

import streamlit as st
from streamlit.elements.image import image_to_url, MAXIMUM_CONTENT_WIDTH
from PIL import Image

img = st.file_uploader("upload image", type=["jpg", "png"])
if img:
    test = Image.open(img)
    width, height = test.size  # width is needed for image_to_url()
    if width > MAXIMUM_CONTENT_WIDTH:
        width = MAXIMUM_CONTENT_WIDTH  # width is capped at 2*730 https://github.com/streamlit/streamlit/blob/949d97f37bde0948b57a0f4cab7644b61166f98d/lib/streamlit/elements/image.py#L39
    st.image(img)
    st.write(
        image_to_url(
            image=img,
            width=width,
            clamp=False,
            channels="RGB",
            output_format=img.type,
            image_id=img.id,  # each uploaded file has a file.id
        )
    )

Output:

st-image-url
st-image-url1854×1406 292 KB

Do you reckon you could modify this code snippet :point_up: and use it in your system?

Happy Streamlit-ing! :balloon:
Snehan

4 Likes
3

Hi @ninth :wave:

Here’s an alternative that doesn’t use PIL:

import streamlit as st
from streamlit import config
from streamlit.session_data import get_url
from streamlit.elements.image import (
    _BytesIO_to_bytes,
    _normalize_to_bytes,
    MAXIMUM_CONTENT_WIDTH,
)
from streamlit.in_memory_file_manager import (
    _calculate_file_id,
    _get_extension_for_mimetype,
    STATIC_MEDIA_ENDPOINT,
)

def img_url(image):
    mimetype = image.type
    data = _BytesIO_to_bytes(image)
    data, mimetype = _normalize_to_bytes(data, MAXIMUM_CONTENT_WIDTH, mimetype)
    extension = _get_extension_for_mimetype(mimetype)
    file_id = _calculate_file_id(data=data, mimetype=mimetype)
    URL = get_url(config.get_option("browser.serverAddress"))
    return "{}{}/{}{}".format(URL, STATIC_MEDIA_ENDPOINT, file_id, extension)

img = st.file_uploader("upload image", type=["jpg", "png"])

if img:
    st.image(img)
    st.write(img_url(img))

Output:

st-image-url2
st-image-url21824×1321 237 KB

Happy Streamlit-ing! :balloon:
Snehan

4 Likes
4

Hi, I am interested in your example,
but get_url and config are undefined
Thanks

1 Like
5

They’re imported right before :point_up:

1 Like
6

Thank you! @snehankekre
is file_id saved somewhere in file system, or I have to save it myself if I want to

7

Thankyou so much had to really go through loop hole for this over 2 days of research and found this article. Life saver :pray:t2:

1 Like