How to display the .PNG file inside HTML component?

🎈 Using Streamlit
#1

I want to display the “Image cap” inside the HTML component, is there any suggestion? The image source should be displayed inside a Boostrap card.

 components.html(
    """
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    
    <div class="card-deck">
    <div class="card">
    <img src="Regression.png" class="card-image-top">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Regression</a>
      </div>
    </div>
    <div class="card">
    <img src="Classification.png" class="card-image-top">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Classification</a>
      </div>
    </div>
  </div>
    """,
#2

Hi @Shikun_Chen, welcome to the Streamlit community!

The problem you are running into here is that the file reference for “Regression.png” isn’t reachable from the web browser, because the browser doesn’t have access to that file. We have an open issue for people to provide content from a directory as you’re trying to do:

In the meantime, you can see the following post, which shows how to use the open file functionality along with f-strings to embed the bytes into your code:

Best,
Randy

1 Like
#3

Does it work also inside HTML component?

#4

Yes, it should work everywhere. The idea is that you are providing the actual bytes within the HTML, which should always work for displaying pictures, making a file download button and other things like that.

#5