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>