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 this image control, in CSS units.

height Union[str,int,float]

The height of this image control, in CSS units.

active bool
dynamic
True

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

id str

The identifier that is 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 are associated with the generated HTML Element.
These class names are added to the default taipy-image class name.

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.

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.