@frankhoodbs/image-cmp v1.2.8
Image Cmp
A component that allows displaying images optimized for various devices and formats, ensuring that the browser loads the most appropriate image based on its capabilities and the user's device size.
Componente che consente di visualizzare immagini ottimizzate per diversi dispositivi e formati, garantendo che il browser carichi l'immagine più appropriata in base alle sue capacità e alle dimensioni del dispositivo dell'utente.
API Reference
Props
Name | Type | Description |
---|---|---|
data-grid-breakpoints | Record<string, string> | Required Breakpoint Object. |
data-sources | Source[] | Source items, see below. |
SourceItem
type definition for each item in data-sources
prop
name | Type | Description |
---|---|---|
type | string | Image format, can be null. |
switch_breakpoint | string | Indicates at which breakpoint the srcset should switch, can be null. |
srcset | string | Different image to load, based on different type or different breakpoint. |
You can use this prop to switch the image at different breakpoints, put at least 2 element, a desktop and a mobile image, the order is important, put the images with the highest breakpoint first and proceed in DESC order.
[
{
type: null,
switch_breakpoint: 'lg',
srcset: '/image3.png',
}, // Desktop image
{
type: null,
switch_breakpoint: 'md',
srcset: '/image2.png',
}, // Tablet image
{
type: null,
switch_breakpoint: null,
srcset: '/image1.png',
}, // Mobile image
]
You can use this prop to load image in different format
[
{
type: 'image/avif',
switch_breakpoint: null,
srcset: '/image2.png',
}, // avif
{
type: 'image/webp',
switch_breakpoint: null,
srcset: '/image1.png',
}, // webp
]
CSS theme classes
Name | Description |
---|---|
.bg-image | If present on the component instance the image is treated like a background. |
.left-top | Works in combination with .bg-image. Set the object-position. |
.left-center | Works in combination with .bg-image. Set the object-position. |
.left-center | Works in combination with .bg-image. Set the object-position. |
.left-bottom | Works in combination with .bg-image. Set the object-position. |
.center-top | Works in combination with .bg-image. Set the object-position. |
.center-center | Works in combination with .bg-image. Set the object-position. |
.center-bottom | Works in combination with .bg-image. Set the object-position. |
.right-top | Works in combination with .bg-image. Set the object-position. |
.right-center | Works in combination with .bg-image. Set the object-position. |
.right-bottom | Works in combination with .bg-image. Set the object-position. |
.fill | Works in combination with .bg-image. Set the object-fit. |
.contain | Works in combination with .bg-image. Set the object-fit. |
.cover | Works in combination with .bg-image. Set the object-fit. |
.none | Works in combination with .bg-image. Set the object-fit. |
.scale-down | Works in combination with .bg-image. Set the object-fit. |
Usage/Examples
<image-cmp
:data-sources="[
{
type: null,
switch_breakpoint: 'lg',
srcset: 'https://picsum.photos/id/100/1440/800',
},
{
type: null,
switch_breakpoint: 'md',
srcset: 'https://picsum.photos/id/101/1024/560',
},
{
type: null,
switch_breakpoint: null,
srcset: 'https://picsum.photos/id/102/767/943',
},
]"
:dataGridBreakpoints="gridBreakpoints"
>
<img
width="1440"
height="800"
src="https://picsum.photos/id/100/1440/800"
alt="Demo image"
/>
</image-cmp>
1 day ago
1 day ago
2 days ago
6 days ago
19 days ago
22 days ago
23 days ago
23 days ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago