Image

Image is a "wrapper component" that uses Next/Image to display images in the design system. It has built-in support for determining how to load images based on connection speed. Otherwise is has the same properties as Next/Image.

Image uses animate in view's default animation to animate the image. This can be turned off by setting noAnimation to true. This is handy if you need to use another animation type available in animate in view such as the starWarsAnimation.

Code examples

Simple example of Image.

// Import Image component
import { Image } from '@components/content/image';
import myFancyImg from '/images/myFancyImg.png';

<Image image={myFancyImg} alt="alt text" quality={100}/>

Size prop when using image in grid

When using grid or in need of smaller picture the size prop is handy to avoid loading a larger image then necessary.

// Imports
import { Image } from '@components/content/image';
import { CardLink } from '@components/content/card-link';
import {GridCol} from 'trinidad-ui';

<GridCol am="6" md="4">
  <Image href='url-to-image' alt="Alt text" sizes="(min-width: 1357px) 20vw, (min-width: 768px) 33vw, 100vw" />
</GridCol>

Props table

Official docs for Next/Image