Components
Image(React)
Commonly used image styles.
| Version: | 14.16.0 •View source•Changelog•Report 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.
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.
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.
You can also use CSS to change the height. This is especially useful when combined with media queries that affect the image height.
Within a carousel
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.
Props
Image
srcrequiredIf
sourcesis provided, this image will be loaded by search engines and lazy-loaded for users on browsers that don’t support responsive images. Ifsourcesis not provided, this image will be lazy-loaded.TypestringsourcesAllows the browser to choose the best file format and image size based on the device screen density and the width of the rendered image.
TypeImageSource[]altTypestringheightCrops the image at the provided height. The
objectFitandobjectPositionprops can be used to control how the image is cropped.TypestringcontainerAspectRatioCreates a placeholder box for the image. The placeholder prevents the browser scroll from jumping when the image is lazy-loaded.
TypenumberforceEarlyRenderDisables lazy-loading and overrides the default calculation of the
sizesattribute. 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 thesizesattribute. See allowable values.TypeReact.ImgHTMLAttributes<HTMLImageElement>['sizes']objectFitProvides control over how the image should be resized to fit the container. This controls the
object-fitCSS property. It is only useful ifheightis used to “crop” the image.TypeThis prop can be one of the following 2 types:
'cover''contain'
objectPositionProvides control over how the image position in the container. This controls the
object-positionCSS property. It is only useful ifheightis used to “crop” the image.TypeThis prop can be one of the following 5 types:
'top''center''bottom''left''right'
classNameTypestring