Skip to main content

Static image

New in v14.3.0

A static image (JPEG / PNG) can be displayed in the parametrization of an editor to, for example, provide additional context to help users fill in certain input fields.

Minimal implementation​

Assume a folder structure as shown below:

my-folder
├── app.py
├── assets
│   └── viktor.png
├── requirements.txt
└── viktor.config.toml

The image viktor.png can be displayed in the parametrization by referencing to it in the app code using an Image field:

class Parametrization(ViktorParametrization):
    img = Image(path="viktor.png")

The image path is relative with respect to the assets_path which can be named arbitrarily and should be defined in the viktor.config.toml:

...
assets_path = "assets"
note

Note that the assets directory does not support nesting of directories.

Re-install your app

You will need to re-install your app after removing the hashtag and adding the 'assets' directory.

Image customization​

You can tweak the visual by specifying one or multiple of the following attributes:

  • align: Alignment within the parametrization component ("left" | "center" | "right")
  • caption: A caption which is shown underneath the image
  • flex: Width of the image as percentage of the total parametrization width
  • max_width: A maximum width (pixels) can be set to make sure an image is not stretched beyond illegible boundaries

Show/hide an image depending on user selection​

There may be cases where the user needs to be informed differently depending on a previous choice. An Image cannot have a dynamic source, however it is possible to use its visibility to show/hide a specific image.