Image

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.

Live Editor

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

Properties

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

Properties

info

Full property documentation will be added soon.