eyuwan/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
  srcBig?: string
  noLook?: boolean
  offline?: boolean
}

function ImageLazy({ width = 100, height = 100, src, srcBig, 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 : srcBig ? baseURL + srcBig : baseURL + src, show: true }
    })
  }, [offline, src, srcBig])

  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