Skip to content

image

A control that can display an image.

Image format

Note that if the content is provided as a buffer of bytes, it can be converted to an image content if and only if you have installed the python-magic Python package (as well as python-magic-bin if your platform is Windows).

You can indicate a function to be called when the user clicks on the image.

Properties

Name Type Default Description
content(★) dynamic(url|path|file|ReadableBuffer)

The image source.
If a buffer is provided (string, array of bytes...), and in order to prevent the bandwidth to be consumed too much, the way the image data is transferred depends on the the data_url_max_size parameter of the application configuration (which is set to 50kB by default):

  • If the size of the buffer is smaller than this setting, then the raw content is generated as a data URL, encoded using base64 (i.e. "data:<mimetype>;base64,<data>").
  • If the size of the buffer is greater than this setting, then it is transferred through a temporary file.
label dynamic(str)

The label for this image.
on_action str

The name of a function that is triggered when the user clicks on the image.
All the parameters of that function are optional:

  • state (State): the state instance.
  • id (optional[str]): the identifier of the button.
  • action (optional[str]): the name of the action that provoked the change.
width str|int|float "300px"

The width, in CSS units, of this element.
height str|int|float

The height, in CSS units, of this element.
active dynamic(bool) True

Indicates if this component is active.
An inactive component allows no user interaction.
id str

The identifier that will be assigned to the rendered HTML component.
properties dict[str, any]

Bound to a dictionary that contains additional properties for this element.
class_name dynamic(str)

The list of CSS class names that will be associated with the generated HTML Element.
These class names will be added to the default taipy-<element_type>.
hover_text dynamic(str)

The information that is displayed when the user hovers over this element.

(★)content is the default property for this visual element.

Styling

All the image controls are generated with the "taipy-image" CSS class. You can use this class name to select the image controls on your page and apply style.

The Stylekit also provides a specific CSS class that you can use to style images:

  • inline
    Displays an image as inline and vertically centered. It would otherwise be displayed as a block. This can be relevant when dealing with SVG images.

Usage

Default behavior

Shows an image specified as a local file path or as raw content.

Page content

<|{content}|image|>

<taipy:image>{content}</taipy:image>

Call a function on click

A specific label can be shown over the image. The function name provided as on_action is called when the image is clicked (same as button).

Page content

<|{content}|image|label=this is an image|on_action=function_name|>

<taipy:image on_action="function_name" label="This is an image">{content}</taipy:image>