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>

Props

Name	Description	Type	Required	Default
style	The style of the component	Native type	No	undefined
class	The class of the component	Native type	No	undefined
src	The source of the image	string | Image | null	No	undefined
alt	The alt of the image	string	No	undefined
hide-loader	Remove the loader	boolean	No	undefined
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	undefined
image-height-full	Make the image height full	boolean	No	undefined
observer-options	The options of the observer	Native type	No	undefined
fallback-src	The fallback src to replace the src on loading error	string	No	undefined
img-class	The classes of the image element	Native type	No	undefined
block	The image will be displayed in full width	boolean	No	undefined

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