Image | Appsmith - SolFind Web Lens

Image | Appsmith

https://docs.appsmith.com/reference/widgets/image • 72 KB fetched
Open original page

Image | Appsmith

Ask AI Search
Ask Appsmith AI Submit message

Examples How do I install Appsmith using Docker? How do I connect to my local PostgreSQL database? How do I pass inputs from a widget to a query? How do I trigger multiple queries conditionally? How do I fix the error: This value does not evaluate to type Array<Object>?

Try Appsmith

* Get Started

* Introduction

* Build Your First App

* Self Hosting

* New Installation Guides

* Manage Installation

* Upgrade Installation Guides

* Concepts

* Connect Data

* Overview

* How-to Guides

* Reference

* Datasources

* Query Settings

* Concepts

* Build Apps

* Overview

* Quickstart

* How-to Guides

* Reference

* Widgets

* Audio

* Audio Recorder

* Button

* Button Group

* Camera

* Card

* Category Slider

* Chart

* Checkbox

* Checkbox Group

* Code Scanner

* Container

* Currency Input

* Custom

* Datepicker

* Divider

* Document Viewer

* Form

* Filepicker

* Icon Button

* Iframe

* Image

* Input

* JSON Form

* List

* Map

* Map Chart

* Menu Button

* Modal

* MultiSelect

* Multi TreeSelect

* Number Slider

* Phone Input

* Progress

* Radio Group

* Range Slider

* Rating

* Rich Text Editor

* Select

* Stats Box

* Switch

* Switch Group

* Tabs

* Table

* Text

* TreeSelect

* Video

* Accessibility

* Theme

* Sample Apps

* Write Code

* Overview

* How-to Guides

* Reference

* Global Objects

* Global Functions

* JS Libraries

* Fetch API

* Data Transformation

* JavaScript Settings

* Concepts

* Best Practices

* Manage Apps and Users

* Authentication

* Granular Access Control

* Versioning with Git

* Setup SCIM Provisioning

* Embed Appsmith

* Migrate Applications

* Audit Logs

* Branding

* External Client Portal

* Packages

* Overview

* Tutorial

* How-to Guides

* Reference

* Package Version Control

* GIT Apps with Packages Best Practices

* Code Packages

* UI Packages

* Workflows

* Overview

* Tutorial

* How-to Guides

* Reference

* Workflow Triggers

* Workflow Queries

* Workflow Functions

* Pass Parameters to Workflows

* Run History

* Troubleshooting

* Overview

* Self-hosting Errors

* Application Errors

* Product

* FAQ

* Security

* Telemetry

* Support at Appsmith

* Privacy Policy

* Release Notes

* Contribute

* Build Apps

* Reference

* Widgets

* Image
On this page
Image

This page describes the properties of the Image widget. You can add images using URLs or base64 strings. The Image widget supports popular formats such as JPG, PNG, SVG, WebP, and GIF.

Content propeties

These properties are customizable options present in the property pane of the widget, allowing users to modify the widget according to their preferences.

Data

Image string

Sets the source from which to render the image. Accepts an image URL, data URI, or base64 encoded image data.
Example : If you want to display inline SVG, paste your SVG content in the Image property and escape the special characters with the UTF-8 equivalents.
data : image / svg + xml , % 3Csvg xmlns = 'http://www.w3.org/2000/svg' width = '100' height = '100' % 3E % 3Ccircle cx = '50' cy = '50' r = '40' stroke = 'green' stroke - width = '4' fill = 'yellow' / % 3E % 3C / svg % 3E

You can also display images that dynamically change based on user input or other components, such as widgets or queries.
Example: Suppose you have a Table widget displaying a list of users with their respective image URLs stored in a column. To bind the images, use {{Table1.selectedRow.image}} in the Image property, where "Table1" is the name of your table widget, and "image" is the column name containing the image URL.
Display images on table row selection
If you are fetching an image from the Amazon S3 bucket, add the following code in the Image property to display the image on the widget:
{ { list_files . data [ 0 ] . signedUrl } }

Default image string

Sets a default image that would be displayed if no image is rendered via the Image property. Accepts an image URL, data URI, or base64 encoded image data.

General

Object fit string

Sets how the image should be resized to fit its container.
Options:

* Contain : The image keeps its aspect ratio, but is resized to fit within the widget dimension.

* Cover : The image keeps its aspect ratio and fills the widget dimension, which means the image is clipped to fill the widget.

* Auto : The image retains its original dimensions.

With JS enabled, accepts string values auto , cover , or contain . See CSS object-fit for reference on these behaviors.

Max zoom level number

Sets the maximum allowable zoom level for the image view. Th available options are 2x , 4x , 8x , 16x . With JS enabled, it accepts a number as the zoom level.

Visible boolean

Controls the visibility of the widget. If you turn off this property, the widget is not visible in View mode. Additionally, you can use JavaScript by clicking on JS next to the Visible property to control the widget's visibility conditionally.
For example, if you want to make the widget visible only when the user checks an item in a Checkbox widget, you can use the following JavaScript expression in the visible property of the Image widget:
{ { Checkbox1 . isChecked } }

Animate Loading boolean

Controls whether the widget is displayed with a loading animation. When enabled, the widget shows a skeletal animation during the loading process. Additionally, you can control it through JavaScript by clicking on the JS next to the property.

Enable rotation boolean

Enables control over image rotation. When enabled, hover over the image and click the rotate icon.

Enable download boolean

Enables users to control whether the image is allowed to be downloaded. When enabled, hover over the image and click the download icon.
Alternatively, you can use the built-in Download function and set it to run on the onClick event of the Image widget as shown below:
{ { download ( Image1 . image , 'my-image-name' , 'image/png' ) } }

Events

When the event is triggered, these event handlers can execute queries, JS code, or other supported actions .

onClick

Triggers when the user clicks on the image.

Style properties

Style properties allow you to change the look and feel of the widget.

Border and shadow

Border radius string

Applies rounded corners to the outer edge of the widget. If JavaScript is enabled, you can specify valid CSS border-radius to adjust the radius of the corners.

Box Shadow string

This property adds a drop shadow effect to the frame of the widget. If JavaScript is enabled, you can specify valid CSS box-shadow values to customize the appearance of the shadow.

Reference properties

Reference properties enable you to access the widget's data and state using the dot operator in other widgets or JavaScript functions. They provide additional information or allow interaction with the widget programmatically. For instance, to retrieve the visibility status of an Image widget, you can use Image1.isVisible .

image string

Contains the URL of the image source.
Example:
{ { Image1 . image } }

isVisible boolean

The isVisible property indicates the visibility state of a widget, with true indicating it is visible and false indicating it is hidden.
Example:
{ { Image1 . isVisible } }

Methods

Widget property setters enable you to modify the values of widget properties at runtime, eliminating the need to manually update properties in the editor.

These methods are asynchronous and return a Promise . You can use the .then() block to ensure the execution and sequencing of subsequent lines of code in Appsmith.

setVisibility (param: boolean): Promise

Sets the visibility of the widget.
Example :
Image1 . setVisibility ( true )

setImage (param: string): Promise

Sets the base64 encoded image in the Image widget.
Example :
Image1 . setImage ( 'data:image/png;base64,iVBORw0KG...' )

Image | Appsmith

Links found on this page