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

              Was this page helpful?