Components

Image(React)

Commonly used image styles.

Version:7.0.1 View sourceChangelogReport issue
Install:yarn add @thumbtack/thumbprint-react
Import:import { Image } from '@thumbtack/thumbprint-react';

Image with src and sources

Browsers that support responsive images will load the best image from the options available in the sources prop. Other browsers will load the image in the src prop.

Images are always lazy-loaded. The containerAspectRatio reserves space for the lazy-loaded image. This avoids content reflow issue that causes the page to “jump” as the image gets loaded.

Cat laying in the sun
<Image
    src="https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/768.jpeg"
    containerAspectRatio={728 / 485}
    sources={[
        {
            type: 'image/webp',
            srcSet: `
                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/120.webp 120w,
                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/320.webp 320w,
                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/400.webp 400w,
                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/640.webp 640w,
                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/768.webp 768w,
                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/1024.webp 1024w,
                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/1366.webp 1366w,
                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/1600.webp 1600w,
                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/1920.webp 1920w,
                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/2200.webp 2200w,
                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/2350.webp 2350w,
                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/2560.webp 2560w
            `,
        },
        {
            type: 'image/jpeg',
            srcSet: `
                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/120.jpeg 120w,
                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/320.jpeg 320w,
                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/400.jpeg 400w,
                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/640.jpeg 640w,
                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/768.jpeg 768w,
                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/1024.jpeg 1024w,
                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/1366.jpeg 1366w,
                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/1600.jpeg 1600w,
                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/1920.jpeg 1920w,
                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/2200.jpeg 2200w,
                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/2350.jpeg 2350w,
                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/2560.jpeg 2560w
            `,
        },
    ]}
    alt="Cat laying in the sun"
/>

Two side-by-side images

The image component accepts style and className props. This example uses both to place two Image components side-by-side.

Sprinker and flowersGrass with concrete steps
<div className="flex">
    <Image
        src="https://d1vg1gqh4nkuns.cloudfront.net/i/323483178133774346/width/400.jpeg"
        alt="Sprinker and flowers"
        containerAspectRatio={400 / 250}
        style={{ width: '50%' }}
        className="mr1"
    />
    <Image
        src="https://d1vg1gqh4nkuns.cloudfront.net/i/327896627728072894/width/400.jpeg"
        alt="Grass with concrete steps"
        containerAspectRatio={400 / 250}
        className="ml1 w-50"
    />
</div>

Cropped images with height

This example uses the height prop to “crop” the image. By default, the cropped image is vertically centered with object-position: center center.

Office building with large table and chairs
<Image
    src="https://d1vg1gqh4nkuns.cloudfront.net/i/323302285472456711/width/1024.jpeg"
    alt="Office building with large table and chairs"
    height="230px"
/>

Props

Image

  • src
    required

    If sources is provided, this image will be loaded by search engines and lazy-loaded for users on browsers that don’t support responsive images. If sources is not provided, this image will be lazy-loaded.

    Type
    string
  • sources

    Allows the browser to choose the best file format and image size based on the device screen density and the width of the rendered image.

    Type
    arrayOf
    Default
    []
  • alt
    Type
    string
    Default
    ''
  • height

    Crops the image at the provided height. The objectFit and objectPosition props can be used to control how the image is cropped.

    Type
    string
    Default
    undefined
  • containerAspectRatio

    Creates a placeholder box for the image. The placeholder prevents the browser scroll from jumping when the image is lazy-loaded.

    Type
    number
    Default
    undefined
  • objectFit

    Provides control over how the image should be resized to fit the container. This controls the object-fit CSS property. It is only useful if height is used to “crop” the image.

    Type
    oneOf([
      'cover',
      'contain',
    ])
    Default
    'cover'
  • objectPosition

    Provides control over how the image position in the container. This controls the object-position CSS property. It is only useful if height is used to “crop” the image.

    Type
    oneOf([
      'top',
      'center',
      'bottom',
      'left',
      'right',
    ])
    Default
    'center'