Qwik Image Component

Showcase ( network Slow 3G 🤯 )

Installation

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

Usage

Global Provider (required)

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$,
});

Image component

<Image
  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:

constrained

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

fixed

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

fullWidth

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';