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

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)