ProgressiveImg渐进式图片

要实现的效果如下图

方式一：自定义指令

<template>
  <img v-proc="{ big, small }" />
</template>
<script>
export default {
  data() {
    const big = new URL(`./assets/images/1d.jpeg`, import.meta.url).href;
    const small = new URL(`./assets/images/1.jpg`, import.meta.url).href;
    return {
      big: big,
      small: small,
    };
  },
  directives: {
    proc: {
      mounted(el, binding) {
        const { small, big } = binding.value;
        el.src = small;
        el.className = "load";

        const img = new Image();
        img.src = big;
        img.onload = () => {
          setTimeout(() => {
            el.src = big;
            el.className = "off";
          }, 2000);
        };
      },
    },
  }