MazLazyImg

MazLazyImg is a standalone component to display images and svgs with lazy loading

Before use it, you should install the MazUi plugin in your project, follow instructions in Getting Started

<script setup lang="ts">
import MazLazyImg from 'maz-ui/components/MazLazyImg'
</script>

<template>
  <MazLazyImg src="https://placedog.net/1000/1000" block />
</template>

Performance

MazLazyImg relies on the vLazyImg directive, whose IntersectionObservers are pooled and shared across every instance - rendering many images (galleries, lists, avatars) stays cheap.

Responsive sources

Pass an object with sources to serve different images depending on the media query (like a native <picture>).

<template>
  <MazLazyImg
    :src="{
      sources: [
        { srcset: 'https://placedog.net/600/400', media: '(max-width: 600px)' },
        { srcset: 'https://placedog.net/1500/1000', media: '(min-width: 601px)' },
      ],
    }"
    block
  />
</template>

Image height full

By default the image is displayed with width: 100%. Enable image-height-full to fill the height instead: the image keeps its aspect ratio, fills 100% of the height and overflows/crops horizontally. Handy for wide images or SVGs inside a fixed-height container.

<template>
  <div style="height: 200px;">
    <MazLazyImg image-height-full src="https://placedog.net/1500/1000" />
  </div>
</template>

Fallback on error

Provide fallback-src to swap the image when it fails to load.

<template>
  <MazLazyImg
    src="https://broken-link-image-src.example"
    fallback-src="https://placedog.net/500/500"
    block
  />
</template>

Without loader

Hide the spinner shown while the image is loading with hide-loader.

<template>
  <MazLazyImg src="https://placedog.net/1000/1000" hide-loader block />
</template>

Props

Name	Description	Type	Required	Default	Possible values
src	The source of the image	MazImage | null	No	-	-
alt	The alt of the image	string	No	-	-
hide-loader	Remove the loader	boolean	No	-	-
observer-once	Remove the observer once the image is loaded	boolean	No	true	-
load-once	Remove the observer once the image is loaded	boolean	No	-	-
image-height-full	Make the image height full	boolean	No	-	-
observer-options	The options of the observer	{ root?: HTMLElement | null | undefined; threshold: number; rootMargin?: string | undefined; }	No	-	-
fallback-src	The fallback src to replace the src on loading error	string	No	-	-
img-class	The classes of the image element	ClassValue	No	-	-
block	The image will be displayed in full width	boolean	No	-	-

Events

Event name	Payload	Description
intersecting	el: Element	Emitted when the image is intersecting
loading	el: Element	Emitted when the image is loading
loaded	el: Element	Emitted when the image is loaded
error	el: Element	Emitted when the image is in error

Slots

Name	Description	Bindings
default		-