Image

The Image component displays images in your view.

Basic usage

tsx
Copied
1
<Image
2
src="https://pilotinstitute.com/wp-content/uploads/2021/02/very-small-light-aircraft.jpg"
3
caption="An Airplane"
4
radius="lg"
5
/>

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

tsx
Copied
1
<Image
2
src="https://pilotinstitute.com/wp-content/uploads/2021/02/very-small-light-aircraft.jpg"
3
imageHeight={100}
4
fit="contain"
5
/>

Cover

tsx
Copied
1
<Image
2
src="https://pilotinstitute.com/wp-content/uploads/2021/02/very-small-light-aircraft.jpg"
3
imageHeight={100}
4
fit="cover"
5
/>

Component API

grow
optional
boolean

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
SizingToken | "{number}px"
Defines the height of the component. See SizingToken docs for more details.
width
optional
Default
auto
SizingToken | "{number}px"
Defines the width of the component. See SizingToken docs for more details.