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(★) Union[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 Union[str, Callable]

A function or the name of a function that is triggered when the user clicks on the image.
This function is invoked with the following parameters:

  • state (State): the state instance.
  • id (str): the identifier of the button if it has one.
  • payload (dict): a dictionary that contains the key "action" set to the name of the action that triggered this callback.
width Union[str,int,float] "300px"

The width of the image control, in CSS units.
height Union[str,int,float]

The height of the image control, in CSS units.
active bool
dynamic		 True

Indicates if this element is active.
If False, the element is disabled, and user interaction is not allowed.
id str

The identifier assigned to the rendered HTML component.
This can be used in callbacks or to target the element for styling.
properties dict[str, Any]

A dictionary of additional properties that can be set to the element.
class_name str
dynamic

A space-separated list of CSS class names to be applied to the generated HTML element.
These classes are added to the default taipy-image class.
hover_text str
dynamic

The text that is displayed when the user hovers over the element.

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

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)

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.