Skip to content

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

NameTypeDefaultRequiredDescription
srcstring-Source of the image
widthnumber-Width of the image
heightnumber-Height of the image (Specify this will results in less layout shift)
qualitynumber75Quality of the image
loaderfndefaultLoaderLoader function, please refer to Loader