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

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

​

Fields

​

Events

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.

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

• Explore this component’s source code on GitHub