UHasselt Component Library

App Image 

<picture class="atm-picture ">
    <source srcset="https://picsum.photos/id/242/150/200" media="(min-width: 1024px)">
    <source srcset="https://picsum.photos/id/242/150/150" media="(min-width: 640px)">
    <img class="picture-image " src="https://picsum.photos/id/242/200/150" alt="The quick brown fox jumps over the lazy dog" loading="lazy">
</picture>
 
<picture class="atm-picture {{modifier}}">
    {{#each sources}}
        <source srcset="{{src}}" media="{{mediaQuery}}">
    {{/each}}
    <img class="picture-image {{imageModifier}}" src="{{src}}" alt="{{alt}}" {{#if lazy}}loading="lazy"{{/if}}>
</picture>
 
{
  "modifier": "",
  "imageModifier": "",
  "lazy": true,
  "alt": "The quick brown fox jumps over the lazy dog",
  "src": "https://picsum.photos/id/242/200/150",
  "sources": [
    {
      "mediaQuery": "(min-width: 1024px)",
      "src": "https://picsum.photos/id/242/150/200"
    },
    {
      "mediaQuery": "(min-width: 640px)",
      "src": "https://picsum.photos/id/242/150/150"
    }
  ]
}
  • Content: 
    .atm-picture {
    @apply block;

    .picture-image {
        @apply block;
    }
}
  • URL: /components/raw/app-image/app-image.css
  • Filesystem Path: src\components\07-app-atoms\app-image\app-image.css
  • Size: 92 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.