ToolJet/docs/versioned_docs/version-3.16.0-LTS/widgets/image.md

id	title
image	Image

The Image component is used to display images in your application.

Properties

<div style={{ width:"100px"}}> Properties	<div style={{ width:"100px"}}> Description
Image URL	Enter the URL of the image to display it on the component.
JS Object	Allows setting an image using a JS object with properties like name, type, size, and base64-encoded data.
Alternative	Used for alt text of images.

Events

<div style={{ width:"100px"}}> Event	<div style={{ width:"100px"}}> Description
On click	Triggers whenever the user clicks on an image.

:::info Check Action Reference docs to get the detailed information about all the Actions. :::

Component Specific Actions (CSA)

Following actions of component can be controlled using the component specific actions(CSA):

<div style={{ width:"120px"}}> Action	<div style={{ width:"135px"}}> Description	<div style={{width: "200px"}}> How To Access
setImageURL( )	Sets the image URL.	components.image1.setImageURL
clearImage( )	Clears the image URL.	components.image1.clearImage
setVisibility( )	Sets the visibility of the component.	components.image1.setVisibility(false)
setLoading( )	Sets the loading state of the component.	components.image1.setLoading(true)
setDisable( )	Disables the component.	components.image1.setDisable(true)

Exposed Variables

Variable	Description	How To Access
imageURL	Access the image URL using this variable.	{{components.image1.imageURL}}
alternativeText	Access the alternative text using this variable.	{{components.image1.alternativeText}}
isLoading	Indicates if the component is loading.	{{components.image1.isLoading}}
isVisible	Indicates if the component is visible.	{{components.image1.isVisible}}
isDisabled	Indicates if the component is disabled.	{{components.image1.isDisabled}}

Additional Actions

<div style={{ width:"100px"}}> Action	<div style={{ width:"150px"}}> Description	<div style={{ width:"250px"}}> Configuration Options
Zoom button	Toggle this to enable zoom options inside image.	Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
Rotate button	Toggle this on to enable rotate button in the image.	Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
Show loading state	Enables a loading spinner, often used with isLoading to indicate progress.	Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
Visibility	Controls component visibility.	Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
Disable	Enables or disables the component.	Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
Tooltip	Provides additional information on hover.	String

Devices

<div style={{ width:"100px"}}> Property	<div style={{ width:"150px"}}> Description	<div style={{ width:"250px"}}> Expected Value
Show on desktop	Makes the component visible in desktop view.	You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
Show on mobile	Makes the component visible in mobile view.	You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.

Styles

Image

<div style={{ width:"100px"}}> Style	<div style={{ width:"100px"}}> Description
Image fit	Choose an image fit - similar to object fit for the image from available options: fill, cover, contain, scale-down
Shape	Choose the border type for the image.
Alignment	Choose the image alignment from available options: left, center, right.

Container

<div style={{ width:"100px"}}> Style	<div style={{ width:"100px"}}> Description
Background	Add a background color to component by providing the HEX color code or choosing the color of your choice from the color-picker.
Border	Add a border color to component by providing the HEX color code or choosing the color of your choice from the color-picker.
Border radius	Add the border radius to the component.
Padding	Adds padding between the image and component border.
Box shadow	Sets the box shadow properties of the component.

:::info Any property having fx button next to its field can be programmatically configured. :::