Solid
Optimized image component for Solid.
Install
sh
$ npm add @urami/solid
$ npm add @urami/solid
sh
$ pnpm add @urami/solid
$ pnpm add @urami/solid
sh
$ yarn add @urami/solid
$ yarn add @urami/solid
sh
$ bun add @urami/solid
$ bun add @urami/solid
Usage
tsx
import Image from '@urami/solid'
const Component = () => {
return (
<Image
src="https://demo.rayriffy.com/tom-scott.jpg"
width={801}
height={801}
alt="Tom Scott"
class="rounded-xl shadow-md"
/>
)
}
import Image from '@urami/solid'
const Component = () => {
return (
<Image
src="https://demo.rayriffy.com/tom-scott.jpg"
width={801}
height={801}
alt="Tom Scott"
class="rounded-xl shadow-md"
/>
)
}
Props
Name | Type | Default | Required | Description |
---|---|---|---|---|
src | string | - | ✅ | Source of the image |
width | number | - | ✅ | Width of the image |
height | number | - | ❌ | Height of the image (Specify this will results in less layout shift) |
quality | number | 75 | ❌ | Quality of the image |
loader | fn | defaultLoader | ❌ | Loader function, please refer to Loader |