React渐进式的图片加载组件

React渐进式的图片加载插件（Tsx版）

index.tsx

import React, { useState, useEffect } from "react";
import './index.less'
const ProgressiveImg = ({ placeholderSrc, src, ...props }) => {
  const [imgSrc, setImgSrc] = useState(placeholderSrc || src);
  const customClass:any = placeholderSrc && imgSrc === placeholderSrc ? "loading" : "loaded";
  useEffect(() => {
    const img = new Image();
    img.src = src;
    img.onload = () => {
      setImgSrc(src);
    };
  }, [src]);

  return (
    <img
      {...{ src: imgSrc, ...props }}
      alt={props.alt || ""}
      className={`image ${customClass} ${props?.className ?? ''}`}
    />
  );
};
export default ProgressiveImg;

index.less

.loading {
  filter: blur(10px);
  clip-path: inset(0);
}
.loaded {
  filter: blur(0);
  transition: filter 0.5