heNan_weiZhouGoods/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/login/loading.gif'
import imgErr from '@/assets/img/login/IMGerror.png'
import { EyeOutlined } from '@ant-design/icons'
import { useDispatch } from 'react-redux'
import { Image } from 'antd-mobile'

type Props = {
  width?: number
  height?: number
  src: string
  srcDa: string
  noLook?: boolean
}

function ImageLazy({ width = 100, height = 100, src, noLook, srcDa }: Props) {
  const dispatch = useDispatch()

  // 默认不能预览图片，加载成功之后能预览
  const [lookImg, setLookImg] = useState(false)

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

  // 点击预览图片
  const lookBigImg = useCallback(() => {
    dispatch({
      type: 'login/lookBigImg',
      payload: { url: baseURL + (srcDa ? srcDa : src), show: true }
    })
  }, [dispatch, src, srcDa])

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

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

const MemoImageLazy = React.memo(ImageLazy)

export default MemoImageLazy