Skip to content

Image

A component to display images.

Use your app's static folder to serve images directly. For example, static/my_image.png.

Alternatively, pass a Matplotlib figure via state.

state["my_fig"] = fig and then setting the Image source to @{fig}

You can also use packed files or bytes:

state["img_b"] = ss.pack_bytes(img_bytes, "image/png")

state["img_f"] = ss.pack_file(img_file, "image/png")

Fields

NameTypeDescriptionOptions
SourceTextA valid URL. Alternatively, you can provide a state reference to a Matplotlib figure or a packed file.
CaptionTextLeave blank to hide.
Max width (px)Number
Max height (px)Number
Secondary textColor
Custom CSS classesTextCSS classes, separated by spaces. You can define classes in custom stylesheets.

Events

NameDescriptionUsage
ss-clickCapture single clicks.
def click_handler(state):

  # Increment counter when the image is clicked

  state["counter"] += 1

Low code usage

This component can be declared directly in Python, using backend-driven UI.

python
ui.Image(content={
        "src": "", # str 
        "caption": "", # str 
        "maxWidth": 0.0, # Union[float, str] 
        "maxHeight": 0.0, # Union[float, str] 
        "secondaryTextColor": "", # str 
        "cssClasses": "", # str 
    },
    handlers={
        "ss-click": handle_event,
    }
)
A function, in this example handle_event, should be implemented in your code to handle events.
python
def handle_event(state, payload, context, ui):
  pass

Reference