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"] = wf.pack_bytes(img_bytes, "image/png")

state["img_f"] = wf.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

​
Low code usage

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

ui.Image(content={
        "src": "", # str 
        "caption": "", # str 
        "maxWidth": 0.0, # Union[float, str] 
        "maxHeight": 0.0, # Union[float, str] 
        "secondaryTextColor": "", # str 
        "cssClasses": "", # str 
    },
    handlers={
        "wf-click": handle_event,
    }
)

A function, in this example handle_event, should be implemented in your code to handle events.

def handle_event(state, payload, context, ui):
  pass

​
Reference