@nhayhoc/qwik-image
v0.0.0
Published
<p align="center"> <br/> <img width="300" src="./assets/qwik-image-logo.png" alt="The goal is a component to support performant images on the web and automatic image optimization. That will be built as a pluggable component so devs could connect diff
Downloads
2
Readme
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