Image
The
Image
component displays images in your view.Basic usage
Basic usage
tsxCopied1<Image2src="https://pilotinstitute.com/wp-content/uploads/2021/02/very-small-light-aircraft.jpg"3caption="An Airplane"4radius="lg"5/>
Width and height
Width and height
In the example above, the image takes 100% of the width of its container and height is calculated
dynamically based on image proportion. To change this behavior, set image
width
and height
to
define image size.Note that if image proportions do not match the given width and height, some parts will be cut out.
In case you want to show the image with its original proportions and want it to fit in the current
width and height, set
fit="contain"
.Contain
Contain
tsxCopied1<Image2src="https://pilotinstitute.com/wp-content/uploads/2021/02/very-small-light-aircraft.jpg"3imageHeight={100}4fit="contain"5/>
Cover
Cover
tsxCopied1<Image2src="https://pilotinstitute.com/wp-content/uploads/2021/02/very-small-light-aircraft.jpg"3imageHeight={100}4fit="cover"5/>
Component API
Component API
grow
optional
If true, the element will grow to fill available space.
This prop works only if the element is a direct child of a Stack.
height
optional
Default
auto
width
optional
Default
auto