liuShaoQi-houTai/src/components/ImageLazy/index.tsx

import React, { useCallback, useState } from "react";
import styles from "./index.module.scss";
import { baseURL } from "@/utils/http";
import imgLoding from "@/assets/img/loading.gif";
import imgErr from "@/assets/img/IMGerror.png";
import { EyeOutlined } from "@ant-design/icons";
import store from "@/store";
import { Image } from "antd-mobile";

type Props = {
  width?: number | string;
  height?: number | string;
  src: string;
  noLook?: boolean;
  offline?: boolean;
};

function ImageLazy({
  width = 100,
  height = 100,
  src,
  noLook,
  offline = false,
}: Props) {
  // 默认不能预览图片，加载成功之后能预览
  const [lookImg, setLookImg] = useState(false);

  // 图片加载完成
  const onLoad = useCallback(() => {
    setLookImg(true);
  }, []);

  // 点击预览图片
  const lookBigImg = useCallback(() => {
    store.dispatch({
      type: "layout/lookBigImg",
      payload: { url: offline ? src : baseURL + src, show: true },
    });
  }, [offline, src]);

  return (
    <div className={styles.ImageLazy} style={{ width: width, height: height }}>
      <div className="lazyBox">
        <Image
          lazy
          onLoad={onLoad}
          src={src ? (offline ? src : baseURL + src) : ""}
          placeholder={<img src={imgLoding} alt="" />}
          fallback={<img src={imgErr} alt="" />}
          fit="cover"
        />

        {/* 图片预览 */}
        {noLook || !lookImg ? null : (
          <div className="lookImg" onClick={lookBigImg}>
            <EyeOutlined rev={undefined} />
            &nbsp;
            <div>预览</div>
          </div>
        )}
      </div>
    </div>
  );
}

const MemoImageLazy = React.memo(ImageLazy);

export default MemoImageLazy;