Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

Thumbnail

The Thumbnail component previews an image URL and falls back to a file graphic when no valid image is available.

Import

1
import { Thumbnail } from '@payloadcms/ui'

File fallback

Loading component example…

Sizes

Loading component example…

Pass the document through doc when possible so the image receives its filename as alternative text.

Common props

These are the props most commonly used with this component. See its exported types in @payloadcms/ui for the complete list.

Prop

Type

Default

Description

fileSrc

string

Image URL to preview.

doc

Record<string, unknown>

Supplies file metadata such as filename.

size

'small' | 'medium' | 'large' | 'expand' | 'none'

'medium'

Sets the thumbnail dimensions.

width

number

Sets the rendered image width.

height

number

Sets the rendered image height.

imageCacheTag

string

Adds a cache-busting value to the image URL.

Was this page helpful?

Next

TimezonePicker