Image urls not displaying when deployed

[laurendudu]

Summary

I am building an image search engine using streamlit, where the results are displayed from image urls. When I run the code on my machine it works fine, but when deployed the images won’t display.

Steps to reproduce

Code snippet:

st.image([result.id for result in top_k_samples["matches"]], width=200)

result.id is a url string, for example http://images.cocodataset.org/train2017/000000293793.jpg

Expected behavior:
This is my result locally:

Actual behavior:

When deployed I get this. I found a workaround by opening the image first with urllib and PIL but the quality takes a toll.

I also tried inserting the image with markdown but I get the same result on both ends.

I would appreciate any suggestions.

Debug info

• Streamlit version: 1.20.0
• Python version: 3.10.5

[CarlosSerrano]

Having a sample of your code would be helpful.

[laurendudu]

@CarlosSerrano Here’s the majority of the code for more context.

import streamlit as st
import pinecone
from utils import get_text_embedding

...

pinecone.init(api_key=PINECONE_KEY, environment="us-east4-gcp")  # app.pinecone.io

index_name = "clip-image-search"
index = pinecone.Index(index_name=index_name)

text_query = st.text_input("Search for images", "A cat in the rain")
number_of_results = st.slider("Number of results", 1, 20, 5)

query_vector = get_text_embedding(text_query)

top_k_samples = index.query(
    vector=query_vector, top_k=number_of_results, include_values=False
)

st.image([result.id for result in top_k_samples["matches"]], width=200)

[CarlosSerrano]

The only thing that comes to mind is ensuring that result.id is a string and not an object on that list.

[laurendudu]

It does not work even after passing it through a string. Thanks for the suggestion though

[laurendudu]

Ok, I found the error! My browser was the problem. I’m using Arc, but on safari it works fine. It’s weird though because Arc is based on chromium.