How to display image url

Using Streamlit
1

I just started using Streamlit (sorry if I’ve missed it in the docs!) but I still don’t know how to display an image with its image url instead of loading and opening an image locally using st.image

My current product is to get a user image and gives out a label after the classification model. Then based on the label, it matches with the loaded csv file that contains a list of labels and the associated product names, urls and image urls. I could display product names and urls as recommended products, but not the images. Any advice or help would be great!

2

Hi @savbanut, welcome to the Streamlit community!

This post shows how you can display a URL using st.markdown:

3

Thank you so much for replying! Sorry I have been trying it many times and I’m still having some trouble.
I tested it and the image doesn’t show up: Screen Shot 2020-06-19 at 7.29.38 PM

I think it’s the way I call these image links - it works if I directly put the link in as your example shows, but since the link is generated depending on my model, I wouldn’t be able to insert it directly since I don’t know what image would be shown.

currently, product1 would get the first link that is returned through my recommendation system, and I would like to display it

product_img = df['product_img'].tolist()
product1 = print(product_img[0])

but then st.markdown("![Product] product1)") would not work. Any ideas how to work around this?

1 Like
4

@savbanut

I believe you are getting an error because when you are obtaining the image URL after converting the product_img column of the dataframe df into a list product_img , it is a string object.

Two logical issues🤔:

  1. Whenever we write markdown syntax(to the best of my knowledge) it is not possible to add load values from variables (or any data structures like strings, lists,etc)

  2. Even if you just had the URL, you need to paste it without any quotes like the following✅:

Input:

![Image Description](upload://86TA7dB3o4z6meIQX3TajkaklNx.jpeg)

Output:

alt text
alt text2048×1365 1.16 MB

and not with double quotes or single quotes surrounding the URL like the following :x:

Input:

![Image Description]("https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall.jpg")

Output:

Image Description

Solution?:sunglasses::

        st.image(
            "https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall.jpg",
            width=400, # Manually Adjust the width of the image as per requirement
        )

In your scenario, this would be

st.image(product_img[0]), width = 400)
2 Likes