vue3-lazyload-img

vue3 图片懒加载

如果你只需要一个简单的图片懒加载组件，那么这个组件应该可以满足你的需求。
占用空间小，已封装好预载、失败两种状态对应的显示，引入使用即可。

install

  yarn add vue3-lazyload-img
  npm i vue3-lazyload-img

example

Vue:

<template>
  <div>
   <LazyloadImg src="https://v3.cn.vuejs.org/logo.png" class="logo" title="This is the title"/>
  </div>
</template>

tsx:

import { LazyloadImg } from "vue3-lazyload-img"

export default () => {
  return (
    <div class="layout-root">
      <LazyloadImg src={'https://v3.cn.vuejs.org/logo.png'} class="logo" title={"This is the title"}/>
    </div>
  )
}

main.ts

import {createApp} from 'vue'
import App from './App.vue'
import lazyloadImgInit, { LazyloadImg } from "vue3-lazyload-img"
const app = createApp(App)

//全局引入
app.use(lazyloadImgInit)

app.mount('#app')

API

如果需要自定义某一张图片预载、失败显示。请参考下面api

示例： import ErrComponent from "./ErrComponent.vue"
      <lazyload-img  preSrc='https://pre.jpg' :errSrc="ErrComponent" src='https://v3.cn.vuejs.org/logo.png' />

LazyloadImg

| key | describe | type | must| | :-------- | :------- | :------------------------- | :---| | src | 图片 | string | 必填 | | class | 样式 | string | 非必填 | | title | 元素标题 | string | 非必填 | | preSrc | 预载 | string/JSX.Element/Component | 非必填 | | errSrc | 加载失败 | string/JSX.Element/Component | 非必填 |

如果需要全局设置，请参考下面api。

示例： 
      app.use(lazyloadImgInit,{
           //支持图片url、jsx、vue模板(非必填，有默认样式)
            preImg: ...,
            //支持图片url、jsx、vue模板(非必填，有默认样式)
            errImg: ...,
            //重试次数(非必填，默认5次)
            retryLoad: ...
      })

lazyloadImgConfig

| key | describe | type | default | must | :-------- | :------- | :------------------------- | :---| :---| | preImg | 预载 | string/JSX.Element/Component | | 非必填 | | errImg | 加载失败 | string/JSX.Element/Component | | 非必填 | | retryLoad | 失败重试次数 | number | 5 | 非必填 |