Image not appearing

image not appearing

getting below error

# Importing Libraries
import pandas as pd
import mysql.connector as sql
import streamlit as st
import plotly.express as px
import os
import json
from streamlit_option_menu import option_menu
from PIL import Image
from git.repo.base import Repo

# Setting up page configuration
icon = Image.open("C:/Users/HP/PycharmProjects/phonepe/ICN.png")

st.set_page_config(page_title="Phonepe Pulse Data Visualization | By Jafar Hussain",
                   page_icon=icon,
                   layout="wide",
                   initial_sidebar_state="expanded",
                   menu_items={'About': """# This dashboard app is created by *Jafar Hussain*!
                                        Data has been cloned from Phonepe Pulse Github Repo"""})

st.sidebar.header(":wave: :violet[**Hello! Welcome to the dashboard**]")

# #To clone the Github Pulse repository use the following code
# Reference Syntax - Repo.clone_from("Clone Url", "Your working directory")
# Repo.clone_from("https://github.com/PhonePe/pulse.git", "Project_3_PhonepePulse/Phonepe_data/data")

# Creating connection with mysql workbench
mydb = sql.connect(host="localhost",
                   user="root",
                   password="12345",
                   database= "phonepe_pulse"
                  )
mycursor = mydb.cursor(buffered=True)

with st.sidebar:
    selected = option_menu("Menu", ["Home", "Top Charts", "Explore Data", "About"],
                           icons=["house", "graph-up-arrow", "bar-chart-line", "exclamation-circle"],
                           menu_icon="menu-button-wide",
                           default_index=0,
                           styles={"nav-link": {"font-size": "20px", "text-align": "left", "margin": "-2px",
                                                "--hover-color": "#6F36AD"},
                                   "nav-link-selected": {"background-color": "#6F36AD"}})
# MENU 1 - HOME
if selected == "Home":
    st.image("C:/Users/HP/PycharmProjects/phonepe/PhonePe_Pulse.jpg")
    st.markdown("# :violet[Data Visualization and Exploration]")
    st.markdown("## :violet[A User-Friendly Tool Using Streamlit and Plotly]")
    col1, col2 = st.columns([3, 2], gap="medium")
    with col1:
        st.write(" ")
        st.write(" ")
        st.markdown("### :violet[Domain :] Fintech")
        st.markdown(
            "### :violet[Technologies used :] Github Cloning, Python, Pandas, MySQL, mysql-connector-python, Streamlit, and Plotly.")
        st.markdown(
            "### :violet[Overview :] In this streamlit web app you can visualize the phonepe pulse data and gain lot of insights on transactions, number of users, top 10 state, district, pincode and which brand has most number of users and so on. Bar charts, Pie charts and Geo map visualization are used to get some insights.")
    with col2:
        st.image("C:/Users/HP/PycharmProjects/phonepe/PhonePe_Pulse.jpg")

If applicable, please provide the steps we should take to reproduce the error or specified behavior.

Expected behavior:

Explain what you expect to happen when you run the code above.

Actual behavior:

Explain the undesired behavior or error you see when you run the code above.
If you’re seeing an error message, share the full contents of the error message here.

Debug info

  • Streamlit version: (get it with $ streamlit version)
  • Python version: (get it with $ python --version)
  • Using Conda? PipEnv? PyEnv? Pex?
  • OS version:
  • Browser version:

Requirements file

Using Conda? PipEnv? PyEnv? Pex? Share the contents of your requirements file here.
Not sure what a requirements file is? Check out this doc and add a requirements file to your app.

Links

  • Link to your GitHub repo:
  • Link to your deployed app:

Additional information

If needed, add any other context about the problem here.

Hi @Dhananjay_Gothankar

Can you try using the relative path to the image (location of the image file in relation to your app.py file). If the image resides at the same level and inside the same folder then you can just use the image name.

In the code example shown below, an image is displayed as the page icon followed by several examples on showing images in a Streamlit app.

Code

import streamlit as st
import streamlit as st
from PIL import Image

# Page icon
icon = Image.open('img/streamlit-mark-light.png')

# Page config
st.set_page_config(page_title="Example App",
                   page_icon=icon,
                   layout="wide",
                   initial_sidebar_state="expanded"
                   )

st.title('🏞️ Image display methods')

# Method 1
st.header('Method 1')
st.write('Here we use the image URL as the input argument to st.image')
st.code("st.image('https://streamlit.io/images/brand/streamlit-mark-light.png')")
st.image('https://streamlit.io/images/brand/streamlit-mark-light.png')

# Method 2
st.header('Method 2')
st.write('Here we use the relative path to the image as the input argument to st.image')
st.code("st.image('img/streamlit-mark-light.png')")
st.image('img/streamlit-mark-light.png')

# Method 3
st.header('Method 3')
st.write('Here we use Image.open as input to st.image. Image URL is input to Image.open.')
st.code("""
img = Image.open('https://streamlit.io/images/brand/streamlit-mark-light.png')
st.image(img)
""")
img = Image.open('img/streamlit-mark-light.png')
st.image(img)

# Method 4
st.header('Method 4')
st.write('Here we use Image.open as input to st.image. Relative path is input to Image.open.')
st.code("""
img = Image.open('img/streamlit-mark-light.png')
st.image(img)
""")
img = Image.open('img/streamlit-mark-light.png')
st.image(img)

Screenshot

Screenshot of the rendered app from the above code example:

Hope this helps!

Best regards,
Chanin

1 Like

not working
do not have such option

by using dricect path getting below error

MediaFileStorageError: Error opening ‘home.png’

Traceback:

File "C:\Users\HP\AppData\Local\Programs\Python\Python311\Lib\site-packages\streamlit\runtime\scriptrunner\script_runner.py", line 565, in _run_script
    exec(code, module.__dict__)File "C:\Users\HP\PycharmProjects\phonepe\Phonepe_Pulse_Data_Visualization.py", line 73, in <module>
    st.image("home.png")File "C:\Users\HP\AppData\Local\Programs\Python\Python311\Lib\site-packages\streamlit\runtime\metrics_util.py", line 332, in wrapped_func
    result = non_optional_func(*args, **kwargs)
             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^File "C:\Users\HP\AppData\Local\Programs\Python\Python311\Lib\site-packages\streamlit\elements\image.py", line 169, in image
    marshall_images(File "C:\Users\HP\AppData\Local\Programs\Python\Python311\Lib\site-packages\streamlit\elements\image.py", line 536, in marshall_images
    proto_img.url = image_to_url(
                    ^^^^^^^^^^^^^File "C:\Users\HP\AppData\Local\Programs\Python\Python311\Lib\site-packages\streamlit\elements\image.py", line 371, in image_to_url
    url = runtime.get_instance().media_file_mgr.add(image, mimetype, image_id)
          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^File "C:\Users\HP\AppData\Local\Programs\Python\Python311\Lib\site-packages\streamlit\runtime\media_file_manager.py", line 222, in add
    file_id = self._storage.load_and_get_id(
              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^File "C:\Users\HP\AppData\Local\Programs\Python\Python311\Lib\site-packages\streamlit\runtime\memory_media_file_storage.py", line 115, in load_and_get_id
    file_data = self._read_file(path_or_data)
                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^File "C:\Users\HP\AppData\Local\Programs\Python\Python311\Lib\site-packages\streamlit\runtime\memory_media_file_storage.py", line 167, in _read_file
    raise MediaFileStorageError(f"Error opening '{filename}'") from ex

are the dependacy which i need to add to the requiment file

image = Image.open(“C:/Users/HP/PycharmProjects/phonepe/PhonePe_Pulse.jpg”)
st.image(image)

I ran into the same issue, looks like streamlit has issues rendering images if these are not either on the same folder as the .py file where st.image() is called, or on a subfolder of the directory where the .py file is residing.

If you store the image in compliance with one of the two scenarios above the problem goes away. But does look like issue, that should be tackled in future versions.

I’ve tried these to load in an avatar image st.chat_message(“assistant”, avatar=teacherPNG)

image loaded with pil
image loaded as SVG string
image loaded with local path, next to py
image loaded with local path, in folder next to py

I just cannot get local images to load on cloud… testing locally it works fine.

Using the browser dev tools I can see that the image is supposed to be at https://conversation.streamlit.app/media/eeb273c19b65cbf6664984e2ffe8ab8df6bb5ff55b6f77f791aaa387.png (which displays fine using that direct URL) but the web page is not displaying it. Any ideas?

1 Like

@shawngiese Can you share a small reproducible snippet of what you have tried, and a link to the repo showing where you put the png and the py files?

@blackary, thanks, I will see about getting a good example. Sometimes I would also see.

MediaFileManager: Missing file ...

How about this
https://lvzis7t3veuljrqmcficqf.streamlit.app/

1 Like

I am running into the same issue. Able to display avatars when running locally but not in the cloud.

Tried to resolve via static file serving but that did not work either. I can reference a file via ./app/static/filename.png in a st.markdown with img src= (and in the browser directly), but not in st.image or in avatar.

Hi @rasmuswissmann, I was able to link to externally hosted images on a web server but nothing else worked reliably.

@shawngiese thanks, yeah, I might default to that for now. curious about what is causing this though.

That is a weird error, and I’m able to reproduce it locally. I’ve reached out to some others on the streamlit team to see if they have any ideas.

Facing similar issue

@lukasmasuch tracked down the source of the issue and put in a bug fix Fix issues with local image as `st.chat_message` avatar by LukasMasuch · Pull Request #7130 · streamlit/streamlit · GitHub that should go out in the next release

2 Likes

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