Question about styling multiple images using st.image() with css

[fc_logical]

Hello,

I am having multiple pictures on my webpage. I am trying to style them in css with different styles; however, I am running into an issue where both images have the same exact class properties. I’m not the best with this though and could be missing something.
first one

heres my second image:

this is my css code i have:
[class=“css-9aoz2h e1vs0wn30”]{
width: auto;
max-width: 850px;
height: auto;
max-height: 750px;
display: block;
justify-content: center;
border-radius: 20%;
}

I appreciate any help! Thank you.

[Charly_Wargnier]

Hi @fc_logical

Try this code to style images:

import streamlit as st

style_image1 = """
width: auto;
max-width: 850px;
height: auto;
max-height: 750px;
display: block;
justify-content: center;
border-radius: 20%;
"""

style_image2 = """
width: auto;
max-width: 900px;
height: auto;
max-height: 800px;
display: block;
justify-content: center;
border-radius: 30%;
"""

st.markdown(
    f'<img src="{"https://people.com/thmb/TzDJt_cDuFa_EShaPF1WzqC8cy0=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc():focal(216x0:218x2)/michael-jordan-435-3-4fc019926b644905a27a3fc98180cc41.jpg"}" style="{style_image1}">',
    unsafe_allow_html=True,
)

st.markdown(
    f'<img src="{"https://people.com/thmb/TzDJt_cDuFa_EShaPF1WzqC8cy0=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc():focal(216x0:218x2)/michael-jordan-435-3-4fc019926b644905a27a3fc98180cc41.jpg"}" style="{style_image2}">',
    unsafe_allow_html=True,
)

Here’s what it looks like:

Best,
Charly

[fc_logical]

Thank you for your quick response! This solved my problem.

[fc_logical]

Hey Charly,

I was running into a problem when I was trying to use images on my local device.
This is how I implemented this:

This is what I see when I load in the page

[Charly_Wargnier]

Glad that it solves your issue, @fc_logical!

Regarding your last point, I cannot see the image. Would you mind re-uploading and also giving us the corresponding error log, along with the related code in text format, please?

Thanks,
Charly

[Goyo]

For that you need a URL that is reachable from the client computer.

You can serve images from the same web server that hosts your application, but you might need to change the configuration and the location of the files.

Static file serving - Streamlit Docs

[fc_logical]

I see, that was my issue. I created a static folder and put my images in there and this issue is resolved! Thank you so much!