Vebego Component Library

Image 

<picture class="atm-image ">
    <source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
    <source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
    <img class="" src="https://picsum.photos/id/250/768/768" alt="" loading="lazy">
</picture>
 
<picture class="atm-image {{modifier}}">
    {{#each sources}}
        <source srcset="{{src}}" media="{{mediaQuery}}">
    {{/each}}
    <img class="{{imageModifier}}" src="{{src}}" alt="{{alt}}" {{#if lazy}}loading="lazy"{{/if}}>
</picture>
 
{
  "modifier": "",
  "imageModifier": "",
  "lazy": true,
  "alt": "",
  "src": "https://picsum.photos/id/250/768/768",
  "sources": [
    {
      "mediaQuery": "(min-width: 1024px)",
      "src": "https://picsum.photos/id/250/1280/1280"
    },
    {
      "mediaQuery": "(min-width: 768px)",
      "src": "https://picsum.photos/id/250/1024/1024"
    }
  ]
}
  • Content: 
    .atm-image
{
    @apply block;
    
    img
    {
        @apply block w-auto max-w-full;
    }
}
  • URL: /components/raw/image/image.css
  • Filesystem Path: src\components\02-atoms\image\image.css
  • Size: 107 Bytes

Lazy loading

By setting lazy is true on the context data the image will be lazy loaded when it is shown beneath the fold on initial load.

Response images

By setting the sources on the context data different images can be shown for different screen sizes by providing media queries. Set the src of the image for the smallest screen size. The sources should be ordered from largest screen size to smallest.