Qwik Image Component

Showcase ( network Slow 3G 🤯 )

!qwik-image-showcase

Installation

``
npm install qwik-image
or
yarn install qwik-image
or
pnpm install qwik-image
`

Usage

$3

`
const imageTransformer$ = $(({ src, width, height }: ImageTransformerProps): string => {
return ${src}?w=${width}&h=${height}&format=webp;
});

// Provide your default options
useImageProvider({
// you can set this property to overwrite default values [640, 960, 1280, 1920, 3840]
resolutions: [640],
// you we can define the source from which to load our image
imageTransformer$,
});
`

$3

`
layout="fixed"
objectFit="cover"
width="300"
height="300"
src={...}
alt={...}
placeholder={...}
/>
`

loading values:

Here is the loading values and behaviors https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading
default: lazy

layout values:

$3

If the width of the image is larger than the screen, the screen size is taken, otherwise the actual image size is kept

$3

regardless of the screen width, the width of the image is kept

$3

the width of the image is always equal to the width of the screen

objectFit values:

Here is the objectFit values and behaviors https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
default: cover

placeholder values:

You can define a placeholder to wait for the image to load.
default: transparent

#### background: 'rgba(37,99,235,1)';

#### background: 'linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(166,206,247,1) 0%, rgba(37,99,235,1) 83%);';

#### background: 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNUTX59BgAEaQJBWyqr7QAAAABJRU5ErkJggg==")';

#### background: 'url("/public/placeholder.jpg") no-repeat center / cover';`