Image

The Image widget is used to display an image from your project's file system.

tip

To get started, simply drag and drop an image file of a common format (such as JPEG or PNG) into the notebook. Our system will automatically process the image and upload it to your current folder. Once the image is uploaded, you will see a new image widget displaying your image, which you can now move and customize.

Basic usage

First, you need to have an image file in your project. If you don't have any, go to your project's file explorer and go into any folder. Click the blue + button and select 'Upload files...'. Upload any image you want.

Now, create an Image widget. In the Path field, click the 'Open' button on the right to open the file picker. Select the image you just uploaded and accept. After picking the image, you should see its path inside the Path field input.

Save the widget, and the image will load inside.

API reference

Basic

Setting name	Type	Description	Default
`Path`	string	The path to the image file.

Advanced

Setting name	Type	Description	Default
`Alt`	string	The alternative text for the image.
`Enable fullscreen mode`	boolean	Whether to enable a fullscreen mode to preview the image.	`true`

Style

Setting name	Type	Description	Default
`Object fit`	string/css_object_fit	The CSS `object-fit` property for the image. See CSS Object Fit.	`contain`
`Width`	string/css_size	The width of the image.	`100%`
`Height`	string/css_size	The height of the image.	`100%`

Events

The Events settings let you trigger actions in response to clicks on the widget elements. When the event is activated, the current block and the subsequent blocks are executed.

Setting name	Type	Description	Default
`On event`	`none` \| `onClick`	Whether to activate the event onClick or not	`none`
`Event variable`	string	Name of the variable to store the data when the event is triggered

Basic usage​

API reference​

Basic​

Advanced​

Style​

Events​

See also​