Components

Image(React)

Commonly used image styles.

Version:14.18.2 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.

By default images are 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 is loaded.

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

Cropped images with custom heights

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

You can also use CSS to change the height. This is especially useful when combined with media queries that affect the image height.

Office building with large table and chairs

This example uses ServiceCard components within a scrollable container. The ServiceCardImage uses the Image component behind the scenes and will behave like the other examples on this page.

Forcing early render

The Image component behavior uses JavaScript to lazy load the image and and calculate the sizes attribute. While this is beneficial in most cases, it also means that the image will not start downloading until the client-side JavaScript is parsed and the image is scrolled into view. The forceEarlyRender prop allows developers to turn off lazy loading and the sizes calculation so that the image can load as soon as possible. This is useful for “above-the-fold” images with a predictable width in server-side-rendered environments.

In this responsive image example sizes is set to 760px, matching the expected render size, and this triggers a single request for the 768w webp or jpeg image. See the section Resolution switching: Different sizes for allowable values.

Caution

By default the Image component will lazy load and calculate the "sizes" attribute for you. An incorrect "forceEarlyRender" value can negatively impact performance or image clarity.

People carrying boxes in truck

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
    ImageSource[]
  • alt
    Type
    string
  • 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
  • containerAspectRatio

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

    Type
    number
  • forceEarlyRender

    Disables lazy-loading and overrides the default calculation of the sizes attribute. Primarily for important images in a server-side rendered environment that must be loaded before JavaScript is parsed and executed on the client. The value gets used as the sizes attribute. See allowable values.

    Type
    React.ImgHTMLAttributes<HTMLImageElement>['sizes']
  • 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

    This prop can be one of the following 2 types:

    • 'cover'
    • 'contain'
  • 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

    This prop can be one of the following 5 types:

    • 'top'
    • 'center'
    • 'bottom'
    • 'left'
    • 'right'
  • className
    Type
    string