Search code examples
streamlit

image and text content in components.html()

I want to display an image and some text below it, using components.html(). But text is not getting displayed below the image. Following is the code:

import streamlit as st
import streamlit.components.v1 as components

components.html(
    '<html><body>' +
    '<a href="https://i.ibb.co/0j2mc7K/4-NPTEL.png" target="_blank" style="text-decoration: none;">' +
    '<img src="https://i.ibb.co/0j2mc7K/4-NPTEL.png" style="width:600px;">' +
    '<div style="color: rgb(81, 0, 12); font-size: 23px; font-family: \'Book Antiqua\';">Title</div>' +
    '<div style="margin-top: 15px; color: rgb(81, 0, 12); font-size: 17px; font-family: \'Book Antiqua\';">Some Description</div></a></body></html>'
)

The same structure works in plain html:

<html>
<body>
    <a href="https://i.ibb.co/0j2mc7K/4-NPTEL.png" target="_blank" style="text-decoration: none;">
        <img src="https://i.ibb.co/0j2mc7K/4-NPTEL.png" style="width:600px;">
        <div style="color: rgb(81, 0, 12); font-size: 23px; font-family: 'Book Antiqua';">
            Title
        </div>
        <div style="margin-top: 15px; color: rgb(81, 0, 12); font-size: 17px; font-family: 'Book Antiqua';">
            Some Description
        </div>
    </a>
</body>
</html>

What can be the issue with the streamlit components.html() code?

Solution

  • That's because the iframe (created by streamlit) is too short for the texts to show up.

    Actually, the html component has a height parameter :

        height : int
            The height of the frame in CSS pixels. Defaults to 150.

    enter image description here

    You need to increase it :

    import streamlit as st
import streamlit.components.v1 as components

components.html(
    "<html><body>"
    + '<a href="https://i.ibb.co/0j2mc7K/4-NPTEL.png" target="_blank" style="text-decoration: none;">'
    + '<img src="https://i.ibb.co/0j2mc7K/4-NPTEL.png" style="width:600px;">'
    + "<div style=\"color: rgb(81, 0, 12); font-size: 23px; font-family: 'Book Antiqua';\">Title</div>"
    + "<div style=\"margin-top: 15px; color: rgb(81, 0, 12); font-size: 17px; font-family: 'Book Antiqua';\">Some Description</div></a></body></html>",
    height=500, # << here
)

    SN: No need to concatenate (+). You can pass the plain html as a multiline string.