Base64 image placeholder
Generates a base64-encoded placeholder image for Payload upload collections and stores it in a text field.
Installation
pnpm add payload-base64-plugin About
This plugin adds a `base64` text field to Payload upload collections and populates it automatically when a file is uploaded. On each `beforeChange` hook it reads the incoming file and runs it through the `plaiceholder` library (which uses sharp) to produce a small, blurred base64 data URL. The result is stored on the document, so frontends can render an instant low-quality placeholder while the full image loads. It is a fork of the `payload-blurhash-plugin`, with the encoding swapped from blurhash strings to base64. By default it attaches to every collection that has an `upload` config. You can restrict it to specific slugs via the `collections` option. Three options are exposed: `collections` to target specific upload collections, `size` (an integer from 4 to 64, default 4) controlling the placeholder dimensions, and `removeAlpha` (default true) to strip the alpha channel. It targets Payload 1.x and requires sharp as a peer dependency. One limitation: it processes one upload field per collection and writes a single `base64` field, so it is not suited to collections needing multiple placeholders per document. The admin webpack config is patched to alias the package to a mock during bundling, which keeps the server-only sharp dependency out of the admin bundle.
Package info
- Package name
payload-base64-plugin- Latest version
1.2.0- Unpacked size
- 13 kB
- License
- Unlicense
- Weekly downloads
- 63
- Last publish
- Nov 27, 2022