Image
The image component lets you display pictures in your app.
Last updated
Was this helpful?
Drag and Drop
The image component lets you display pictures in your app.
Last updated
Was this helpful?
The Image component lets you display pictures in your app and pairs nicely with image-based components like the Camera, Photo Library, and Image Recognizer.
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]
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
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
Resize Mode
Define dimensions of the image component/container
Select from list [Stretch, Float in Place]
Visible
Toggle whether your end users can see the Image
True/False
Border Style
Style of Image's border
Select from list [solid, dotted, dashed]
Border Color
Color of Image's border
Color
Border Width
Width of Image's border in pixels
Number
Border Radius
Radius of corners of Image's border in pixels
Number
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
This event handler is fired when the user clicks on the image.
Set and get the Image component's Picture.
Set and get the Image component's Resize mode
Returns the height of the Image component in pixels after it has been rendered on-screen.
Returns the width of the Image component in pixels after it has been rendered on-screen.
Set and get whether the Image component is visible on the screen.
