Why is the photo_slider.html file i created not displaying the photos after incorporating it into streamlit app?

Community Cloud
1

I am working on a streamlit app, and I want to display photos of some projects on the app. I have implemented a photo slide “photo_slider.html” with HTML and CSS, which works fine. I am now trying to incorporate it into the streamlit app but this is the result below
streamlit

The images and the photo_slider.html file are saved in a folder called “projects”. the projects folder is saved in the same directory as the streamlit file app.py," yet the images dont display

Code:

import streamlit as st
from PIL import Image
import requests
from streamlit_lottie import st_lottie
import streamlit.components.v1 as com
import codecs

# ---- PROJECTS SLIDESHOW FUNCTION ----
def st_slideshow(photoslider_html, height=300):
    slideshow_file = codecs.open(photoslider_html, 'r')
    page = slideshow_file.read()
    com.html(page, height=height)
        

# ---- MAIN FUNCTION ----
def main():
    #---- ONGOING PROJECTS ----
    st.markdown("**Ongoing Projects**")
    st_slideshow("projects/photo_slider.html")

if __name__=='__main__':
    main()

photo_slider.html code:

<!DOCTYPE html>
<html lang="en">
<style>

    *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}

.container{
    width: 100%;
    height: 100vh;
    background: wheat;
    display: flex;
    align-items: center;
    justify-content: center;
}
.swiper{
    width: 80%;
    height: fit-content;
}
.swiper-slide img{
    width: 100%;
}
.swiper .swiper-button-prev, .swiper .swiper-button-next{
    color: orangered;
}
.swiper .swiper-pagination-bullet-active{
    background: orangered;
}

</style>
<head>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Slider</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"/>
</head>
<body>
<div class="container">
    <div class="swiper">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
          <!-- Slides -->
          <div class="swiper-slide"><img src="img1.PNG"></div>
          <div class="swiper-slide"><img src="img2.PNG"></div>
          <div class="swiper-slide"><img src="img3.PNG"></div>
          <div class="swiper-slide"><img src="img4.PNG"></div>
          <div class="swiper-slide"><img src="img5.PNG"></div>
          <div class="swiper-slide"><img src="img6.PNG"></div>
          <div class="swiper-slide"><img src="img7.PNG"></div>
          <div class="swiper-slide"><img src="img8.PNG"></div>
          
        </div>
        <!-- If we need pagination -->
        <div class="swiper-pagination"></div>
      
        <!-- If we need navigation buttons -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

      </div>


<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>

<script>
    const swiper = new Swiper('.swiper', {
        autoplay: {
            delay: 3000,
            disableOnInteraction: false,
        },

  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

 
});

</script>

</body>
</html>
2

Hi @Ronmi_ty

To render HTML in a Streamlit app, you’ll need to look into using st.components.v1.html and further info can be found in the Documentation page shown below:

Hope this helps!

3

Paths in html are not exactly the same as paths in a file system. For example, this line:

translates in your browser looking for the image in

GET http://localhost:8501/image.png          [HTTP/1.1 404 Not Found 3ms]

which will not be found. You will need to serve them so the component can find them. To do that, take a look at Static file serving - Streamlit Docs. In short, that will allow your html components to access the images following the path ./app/static/<file-name>

<div class="swiper-slide"><img src="./app/static/kiwi.png"></div>
<div class="swiper-slide"><img src="./app/static/lemon.png"></div>
<div class="swiper-slide"><img src="./app/static/orange.png"></div>

photoslider

Here is the folder structure for reference:

photo_slider/
├── .streamlit
│   └── config.toml
├── photoslider.py
├── projects
│   └── photo_slider.html
└── static
    ├── kiwi.png
    ├── lemon.png
    └── orange.png
1 Like
4

Thanks for your reply, but no, it doesn’t. As shown in my code, I have imported st.components.v1.html as com and have done what you suggested already by assigning the contents of the HTML file to the variable page (see last two lines of the slideshow function)
Also, the image I shared shows that the HTML component was rendered, but the slideshow’s photos appear tiny, like thumbnails. That is where the issue lies.

5

broken-image-icon-23-430603653
broken-image-icon-23-430603653488×550 10.5 KB

Those are broken image icons and they indicate that the image was not found.

6

yes! This is it. thanks.
I concluded that since the photos and the HTML file are in the same location, it should detect them.
thanks once again!

7

I just got home, and I’m trying to implement your suggestion, which I’m sure is the solution, but it’s not working. Maybe there is something I’m missing.
So I made a folder called ‘.streamlit’.
inside .streamlit, i created a .toml file called config.toml
Inside the config.toml, I added the following code:

# .streamlit/config.toml

[server]
enableStaticServing = true

Finally, I created a folder called static and pasted all the photos for the slideshow in it.
then, in the photo_slider.html, I edited my code to the following:

<div class="swiper-slide"><img src="./app/static/img1.png"></div>
<div class="swiper-slide"><img src="./app/static/img2.png"></div>
<div class="swiper-slide"><img src="./app/static/img3.png"></div>

Is there something I’m missing, please?

8

The enableStaticServing config option was introduced in version 1.18. Are you running a streamlit version equal or higher than that?

$ streamlit version
1 Like
9

good day @edsaac. I was on Streamlit version 1.11. Having upgraded to version 1.25, I am very delighted to tell you that my app project now works fine! thank you.

2 Likes
10

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