Custom Image
Last edit: Febuary 16th 2025
I created this to show a loading skeleton while an image loads instead of abruptly popping in, it also includes a dropdown menu, and the image will still cache normally.
It is built ontop of next/image so it is best used in a Next.js project.
Installation
npx shadcn@latest add "https://c-g.dev/c-image.json"Props
loadingIndicator
This adds a loading indidcator ontop of the skeleton.
hide
This hides the image behind a blur.
skeleton
Wether to show a loading skeleton or not.
cache
Wether to cache the image or always load it.
dropdown
Wether to show a dropdown menu or not.
children
The intended purpose of children is to place a title on the image.
Component API
| Name | Type | Default | Description |
|---|---|---|---|
src | string | The image source | |
alt | string | image | The image alt text |
skeleton | boolean | true | Show a loading skeleton |
pause | boolean | false | Pause the skeleton, mainly for demonstration purposes |
dropdown | boolean | false | Show a dropdown menu |
width | number | 500 | The image width |
hide | boolean | false | Hide the image |
children | string | The image title | |
height | number | 500 | The image height |
layout | string | responsive | The image layout |
loadingIndicator | boolean | false | Show a loading indicator ontop of the skeleton |
cache | boolean | true | Cache the image |
className | string | The image class | |
style | object | The image style | |
delay | number | The delay before the image loads |