Drag and Drop
Image
The image component lets you display pictures in your app.

Image Overview

The Image component lets you display pictures in your app and pairs nicely with image based components like the Camera, Photo Library, Image Recognizer and Media DBโ€‹

Properties

Image

Property
Description
Data Type
Picture
The image file to be shown in the Image component
PNG, JPG, GIF, SVG, etc. Can also use URL that ends in file extension (eg https://thunkable.com/static/media/logo.ba96eb83.png)
Picture Resize Mode
Set how picture is shown if the file and the Image component have different dimensions/aspect ratio
Select from list [cover, contain, stretch, repeat, center]

Picture Resize Mode

With the Resize Mode property, you can do the following:
  • Center: Positions the picture in the middle of the image component
  • Cover: Resizes the picture to its max height or width regardless without changing the image quality.
  • Contain: Resizes the picture to fit the area without changing its quality
  • Repeat: Repeats the picture at its original quality within the image component area
  • Stretch: The pictureโ€™s height will change to fill the image component length-wise

Layout

Property
Description
Data Type
X
Position of top left corner of Image on X-axis, where the left hand side is X=0
Number
Y
Position of top left corner of Image on Y-axis, where the top is Y=0
Number
Height
Height of Image in pixels
Number
Width
Width of Image in pixels
Number
Visible
Toggle whether your end users can see the Image
True/False

Style

Property
Description
Data Type
Border Width
Width of Image's border in pixels
Number
Border Radius
Radius of corners of Image's border in pixels
Number
Border Color
Color of Image's border
Color
Border Style
Style of Image's border
Select from list [solid, dotted, dashed]
Shadow Color
Color of Image's shadow
Color
Shadow Opacity
Opacity of Image's shadow
Number between 0 and 100
Shadow Radius
Radius of corners of Image's shadow in pixels
Number
Shadow Offset
How far Image's shadow should be offset, in Height and Width, in pixels
Number

Blocks

Events

Click

This event handler is fired when the user clicks on the image.

Properties

Picture

Set and get the Image component's Picture.
โ€‹

Resize Mode

Set and get the Image component's Resize modeโ€‹

Height

Returns the height of the Image component in pixels after it has been rendered on-screen.

Width

Returns the width of the Image component in pixels after it has been rendered on-screen.

Visible

Set and get whether the Image component is visible on the screen.
Last modified 12d ago