Image

The Image component renders an img element with basic styling to stop it from overflowing its parent element or expanding beyond its natural size and distorting.

<Image
  src="https://picsum.photos/id/919/300/200"
  alt="An Atom Learning user riding a pencil rocket"
/>

Photo credit

Add an Image.Credit child to overlay a tap-to-reveal photo credit in the bottom-right corner. It stays out of the way as a small info button until tapped, then expands into a pill that links the author to sourceUrl and the licence to licenseUrl. Without an Image.Credit child the image renders exactly as it does above.

<Image
  src="https://picsum.photos/id/919/300/200"
  alt="An Atom Learning user riding a pencil rocket"
>
  <Image.Credit
    author="Jane Doe"
    sourceUrl="https://picsum.photos"
    licenseName="CC BY 4.0"
    licenseUrl="https://creativecommons.org/licenses/by/4.0/"
  />
</Image>

API Reference

Image.Credit