Hey everyone,
I just published my first Directus marketplace extension: Image URL Preview.
https://www.npmjs.com/package/directus-extension-image-url-preview
The problem
Directus has a great built-in image preview — but it only works for files uploaded into Directus itself. If your image lives somewhere else (S3, Cloudflare R2, bunny.net, Cloudinary, a third-party API, GitHub raw, anything), you store the URL as a plain string field… and then you just see raw URL text everywhere. No preview. No thumbnail. Nothing.
I hit this on a project recently and decided to build a proper solution.
What’s in the bundle
The extension ships two extensions in one install — an interface for the form view and a display for tables/lists.
Interface (form view)
- Inline preview right under the URL input
- Empty state, loading state, error fallback (no broken-image icons leaking through)
- Configurable height, object-fit, and border radius
- Click-to-enlarge lightbox modal
- Lazy loading and
referrerpolicy="no-referrer"(sidesteps hotlink blocks and respects privacy) - Optional read-only mode
Display (table / list view)
- Compact thumbnails inline in collection list views
- Three sizes: 24px / 40px / 64px
- Three shapes: rounded square / circle / square
- No layout shift while loading
- Graceful broken-image fallback with the URL in the tooltip
Theming
Uses Directus 11 theme tokens throughout (--theme--background-subdued, --theme--border-color-subdued, etc.) so it adapts automatically to light, dark, and custom user themes. No hardcoded colors.
Install
From the Marketplace:
Settings → Marketplace → search “Image URL Preview” → Install
From npm:
npm i directus-extension-image-url-preview
Configuration
Both interface and display work on string and text fields out of the box with sensible defaults. Every option is configurable from the data model UI — no code edits needed.
| Interface options | Display options |
|---|---|
| Allow editing the URL | Preview size (small/medium/large) |
| Preview height | Shape (rounded/circle/square) |
| Object fit | |
| Border radius | |
| Click to enlarge |
What’s next
This is extension #1 of more to come — I’m building on Directus full-time and have a few others in the pipeline. If there’s a missing piece in your workflow that you’d love to see as an extension, drop a comment — happy to take requests.
Feedback, bug reports, and PRs are all very welcome. Hope this saves someone the headache it saved me.
— Ahmad Khan
GitHub: khanahmad4527 (Ahmad Khan) · GitHub
LinkedIn: https://www.linkedin.com/in/khanahmad4527