MazLazyImg

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

INFO

Before you have to import the global css files in your project, follow instructions in Getting Started

<template>
  <MazLazyImg src="https://loremflickr.com/1000/1000" block />
</template>

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

Props, Event & Slots

Props

Prop name	Description	Type	Values	Default
style	The style of the component	TSIndexedAccessType	-	undefined
class	The class of the component	TSIndexedAccessType	-	undefined
image	@deprecated Use src instead	union	-	undefined
src	The source of the image	union	-	undefined
alt	The alt of the image	string	-	undefined
noPhoto	Display the fallback image	boolean	-
noLoader	Remove the loader	boolean	-
noObserverOnce	Remove the observer once the image is loaded	boolean	-
loadOnce	Remove the observer once the image is loaded	boolean	-
imageHeightFull	Make the image height full	boolean	-
observerOptions	The options of the observer	TSIndexedAccessType	-	undefined
fallbackSrc	The fallback src to replace the src on loading error	string	-	undefined
imgClass	The classes of the image element	TSIndexedAccessType	-
block	The image will be displayed in full width	boolean	-

Events

Event name	Properties	Description
intersecting		Emitted when the image is intersecting
loading		Emitted when the image is loading
loaded		Emitted when the image is loaded
error		Emitted when the image is in error

Slots

Name	Description	Bindings
default