Skip to content

Image

Renders an image.

Usage

Code
import { createSystem } from 'frog/ui'
 
const { Image } = createSystem()
 
function Example() {
  return <Image src="/frog.png" />
}

Image Properties

borderRadius

Sets the border radius of the image.

Also, works with border{Bottom|Top}{Bottom|Left|Right|Top}Radius.

Code
<Image
  borderRadius="
0
1
2
3
4
6
8
10
12
14
16
18
20
22
24
26
28
30
32
34
36
38
40
42
44
46
48
52
56
60
64
72
80
96
128
160
192
224
256
48"
  src="/frog.png"
/>

height

Sets the height of the image.

Code
<Image
  height="
100%
0
1
2
3
4
6
8
10
12
14
16
18
20
22
24
26
28
30
32
34
36
38
40
42
44
46
48
52
56
60
64
72
80
96
128
160
192
224
256
48"
  src="/frog.png"
/>

objectFit

Sets the object fit of the image.

Code
<Image
  height="96"
  objectFit="
none
contain
cover
cover"
  src="/frog.png"
  width="48"
/>

src

The URL of the image to display.

Code
<Image
  src="/frog.png"
/>

width

Sets the width of the image.

Code
<Image
  width="
100%
0
1
2
3
4
6
8
10
12
14
16
18
20
22
24
26
28
30
32
34
36
38
40
42
44
46
48
52
56
60
64
72
80
96
128
160
192
224
256
48"
  src="/frog.png"
/>