Image

Components

Image

Code

Image is a wrapper for the native image tag with support for events and fallback images.

Always provide alt text for your users, unless the image is purely decorative, in which case the alt text should be an empty string ("") to hide it from screen readers.

import { Image } from '@sproutsocial/racine'

<Image
  alt='The reception area of the Sprout Social office.'
  src='/example-photo.jpg'
  m={0}
/>

Properties

Name	Type	Default	Description
`src`	`string`
`alt`	`string`		Alt text is required for non-decorative images
`title`	`string`	`""`
`onError`	`(e: React.SyntheticEvent<HTMLImageElement, Event>) => void`	`() => {}`
`onClick`	`() => void`	`() => {}`
`defaultImage`	`string`		A URL for a default image to load if the source image is not available
`onLoad`	`() => void`	`() => {}`
`qa`	`object`