Vue3-lazyload

图片懒加载，

可以使用 v-lazy 使用在带 src 属性的原生标签上，可以根据 key 生成自定义的 url, 也可以根据路径生成 webp 格式的图片，让 cdn 的图片减少带宽，加速显示

import VueLazyLoad from 'vue3-lazyload'

let isSupportWebP = null
app.use(VueLazyLoad, {
    loading: '', // 加载过程中的图片
    error: '', // 加载出错的图片
    lifecycle: {
      loading: (el) => {
        // 判断是否支持
        isSupportWebP = !![].map && document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') === 0
      },
      loaded: (el) => {
        const haveTo = el.src.endsWith('webp') || el.src.endsWith('.svg')
        if (isSupportWebP && !haveTo) el.src += '?imageView2/0/format/webp'
      }
    }
})

错误提示

图片懒加载

<template>
    <div>
        <img v-lazy="`https://static.jsvue.cn/common/images/ws_head.jpg`" alt="" />

        <span> &nbsp; </span><span> &nbsp; </span>
        <img v-lazy="`/sfc/24519769.jpg`" alt="" /> <span>错误提示</span>

        <span> &nbsp; </span><span> &nbsp; </span>
    </div>
</template>

# Vue3-lazyload

Vue3-lazyload