The Image component renders extends and renders an img tag underneath.
Import the Image component from @avocado-ui/react and render with the required src prop.
import { Image } from '@avocado-ui/react'
const imgURL =
'https://images.unsplash.com/photo-1569706971306-de5d78f6418e?w=300'
render ( < Image src = { imgURL } alt = ' Landscape with yellow sky ' /> )
Please add the alt attribute to your images. These can help describe the image for screen readers.
The Image comes in medium size by default. You can change that by specifying a size value with the size prop. You can set it to any of the following - xs, sm, md, lg, xl.
import { Image } from '@avocado-ui/react'
const imgURL =
'https://images.unsplash.com/photo-1569706971306-de5d78f6418e?w=300'
render (
< >
< Image src = { imgURL } alt = ' Landscape with yellow sky ' size = ' xs ' />
< Image src = { imgURL } alt = ' Landscape with yellow sky ' size = ' lg ' />
< Image src = { imgURL } alt = ' Landscape with yellow sky ' size = ' xl ' />
</ >
)
You can also pass a number (integer) that'll set the image height & width in pixels.
import { Image } from '@avocado-ui/react'
const imgURL =
'https://images.unsplash.com/photo-1569706971306-de5d78f6418e?w=300'
render (
< >
< Image src = { imgURL } alt = ' Landscape with yellow sky ' size = { 100 } />
< Image src = { imgURL } alt = ' Landscape with yellow sky ' size = { 120 } />
< Image src = { imgURL } alt = ' Landscape with yellow sky ' size = { 150 } />
</ >
)
The size prop overrides the height & width property of the original img element.
You can apply a quick change to the border-radius of the Image component by using the shape prop. It's value can be any of curve, round and square
import { Image } from '@avocado-ui/react'
const imgURL =
'https://images.unsplash.com/photo-1569706971306-de5d78f6418e?w=300'
render (
< >
< Image src = { imgURL } alt = ' Landscape with yellow sky ' shape = ' curve ' />
< Image src = { imgURL } alt = ' Landscape with yellow sky ' shape = ' round ' />
< Image src = { imgURL } alt = ' Landscape with yellow sky ' shape = ' square ' />
</ >
)
In cases where the image you're rendering is out of proportion, you can use the objectFit prop to crop into appropriate ratio. The values for objectFit are fill, contain, cover, none and scale-down
import { Image } from '@avocado-ui/react'
const imgURL = 'https://images.unsplash.com/photo-1543414347-1c348021f279?w=300'
render (
< >
< Image src = { imgURL } alt = ' Landscape with yellow sky ' objectFit = ' contain ' />
< Image src = { imgURL } alt = ' Landscape with yellow sky ' objectFit = ' cover ' />
< Image src = { imgURL } alt = ' Landscape with yellow sky ' objectFit = ' none ' />
</ >
)
You can change the value of objectFit in this demo to get a feel of the differences. Also see object-fit documentation.
It's great practice to describe images with captions. Avocado provides a beautiful API for doing just that. Get started with the caption prop
Image I took yesterday import { Image } from '@avocado-ui/react'
const imgURL = 'https://images.unsplash.com/photo-1543414347-1c348021f279?w=300'
render (
< >
< Image
src = { imgURL }
alt = ' Landscape with yellow sky '
caption = ' Image I took yesterday '
captionPosition = ' bottomCenter '
/>
</ >
)
You can furthermore, customize the position of the caption by setting captionPosition to any of topLeft, topCenter, topRight, bottomLeft, bottomCenter or bottomRight. It's set to bottomCenter by default.
Image I took yesterday Image I took yesterday Image I took yesterday import { Image } from '@avocado-ui/react'
const imgURL = 'https://images.unsplash.com/photo-1543414347-1c348021f279?w=300'
render (
< >
< Image
src = { imgURL }
alt = ' Landscape with yellow sky '
caption = ' Image I took yesterday '
captionPosition = ' topCenter '
/>
< Image
src = { imgURL }
alt = ' Landscape with yellow sky '
caption = ' Image I took yesterday '
captionPosition = ' bottomRight '
/>
< Image
src = { imgURL }
alt = ' Landscape with yellow sky '
caption = ' Image I took yesterday '
captionPosition = ' bottomLeft '
/>
</ >
)
The spacing between the image and the caption might not look good to you. You can customize it by passing a number to the captionSpacing prop.
Image I took yesterday Image I took yesterday import { Image } from '@avocado-ui/react'
const imgURL = 'https://images.unsplash.com/photo-1543414347-1c348021f279?w=300'
render (
< >
< Image
src = { imgURL }
alt = ' Landscape with yellow sky '
caption = ' Image I took yesterday '
captionPosition = ' bottomCenter '
captionSpacing = { 30 }
/>
< Image
src = { imgURL }
alt = ' Landscape with yellow sky '
caption = ' Image I took yesterday '
captionPosition = ' topCenter '
captionSpacing = { 30 }
/>
</ >
)
Avocado is intelligent enough to know where to add the space depending on the captionPosition prop
property description type default size size of image xs, sm, md,lg, numbermdshape shape of image round, square,curvesqaurealt Text to announce out to screen readers. Please make this available stringsrc source for avatar image stringwidth width of image numberheight height of image numbercaption Caption to more information about image stringcaptionPosition position to show the image caption. topLeft, topCenter, topRight, bottomLeft, bottomCenter, bottomRight bottomCenterbottomCentercaptionSpacing space between the image and the image caption in px number
← Heading Input → 
