深入剖析VUE图片懒加载的黑科技

• loading 图片加载中的内容
• error 图片加载失败时的内容
• default 图片加载成功的默认内容

以下是 VUE 图片懒加载的演示代码：

<template>
  <vue:img src="https://img.alicdn.com/00000/xx/xx/xx/xx-1.png" loading="lazy" placeholder="data:image/png;base64,d4d1d931b55de03f5d4f590b91f4537b51d931b55de03f5d4f590b91f453" error-image="data:image/png;base64, X...4M=EAAAA...40=u...1..E...=4." sizes="100vw" @success="handleSuccess" @error="handleError" @load="handleLoad">
    <template #loading>
      <div style="color:#99a9a9">图片加载中...</div>
    </template>
    <template #error>
      <div style="color:#99a9a9">图片加载失败，请重试</div>
    </template>
    <template #default>
      <img alt="图片内容"></img>
    </template>
  </vue:img>
</template>

<script>
  export default {
    methods: {
      handleSuccess(e) {
        // 图片加载成功时触发
      },
      handleError(e) {
        // 图片加载失败时触发
      },
      handleLoad(e) {
        // 图片加载中时触发
      }
    }
  }
</script>

希望本文对您有所帮助，如果有任何疑问，请尽管联系我们。