Image partially displayed as black box in Streamlit app after deployment

Using Streamlit
1

Summary

I’ve deployed a Streamlit app on Google Cloud Run and I’m having issues with displaying an image. The image is loaded using Image.open() and displayed using st.image() . Initially, the image was displayed correctly, but after a day or two, part of the image becomes a black box as shown below:

image
image810×278 22.8 KB

Steps to reproduce

Code snippet:

title_image = Image.open(DATA / "images/logo.png")
st.image(title_image)

Links

Additional information

Has anyone experienced a similar issue or have any suggestions for how to resolve it? Here are some details about the image and deployment environment:

  • The image is a PNG file with dimensions 740x740 pixels.
  • The app is deployed on Google Cloud Run using a Docker container.

I’d appreciate any help or guidance on how to resolve this issue. Thank you in advance!

2

Hey @DeepUFC,

Thanks for sharing this question! That behavior seems super strange. What does the actual image look like?

Also I’m a little confused by this line:

title_image = Image.open(DATA / "images/logo.png")

Is the path to the image “DATA/image/logo.png”? If so, I would pass it as title_image = Image.open("DATA/images/logo.png") rather than title_image = Image.open(DATA / "images/logo.png")

3

Hi @Caroline,

Thank you for your response! DATA is a variable that I defined earlier with Path, Sorry about the confusion.

The original picture should look like this:

logo3
logo3740×740 177 KB

I switched the format from .png to .jpg, now it looks like this after a day:
image

I am really hoping to find out how to resolve this.

Thank you!

4

My guess is that the Image is never closed, so each time the app is rerun, a new pointer is created without properly handling the previous open action. Do you get the same issue using a context manager?

import streamlit as st
from PIL import Image
from pathlib import Path

DATA = Path(".")
with Image.open(DATA/"logo.jpeg") as title_image:
    st.image(title_image)

Just curious, is there a particular reason to not pass the path to st.image directly?

5

Hi @edsaac,

Thank you so much for your advice! I have now passed the image path as a string to st.image. I’ll come back and select your answer as the solution if the issue goes away!

6

Hi @edsaac,

Your suggestion has helped resolve the issue. Thank you!