Image urls not displaying when deployed


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([ for result in top_k_samples["matches"]], width=200) is a url string, for example

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

Having a sample of your code would be helpful.

@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")  #

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([ for result in top_k_samples["matches"]], width=200)

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

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

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

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.