Skip to content
taipy

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(★) path|URL|file|ReadableBuffer
dynamic

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 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 str
dynamic

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.
  • payload (dict): a dictionary that contains the key "action" set to the name of the action that triggered this callback.
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 bool
dynamic		 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 str
dynamic

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 str
dynamic

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.

Definition

<|{content}|image|>

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

import taipy.gui.builder as tgb
...
tgb.image("{content}")

Call a function on click

The label property can be set to a label shown over the image.
The function provided in the on_action property is called when the image is clicked (like with a button).

Definition

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

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

import taipy.gui.builder as tgb
...
tgb.image("{content}", label="This is an image", on_action=function_name)