LazyLoadWrapper height is wrong

This issue has been tracked since 2020-10-30.

Why is that LazyLoadWrapper has height + 5px thats create unnecessary margin?

height is wrong
height is wrong

// height props is 100
function AvatarPlaceholder({ width, height }: { width: number; height: number }) {
  return (
    <AvatarPlaceholderStyled height={height} width={width}>
      123
    </AvatarPlaceholderStyled>
  )
}

const Avatar = forwardRef<HTMLImageElement, Props>(({ url, width, height, ...rest }, ref) => {
  return (
    <LazyLoad height={height} once offset={200} placeholder={<AvatarPlaceholder height={height} width={width} />}>
      <AvatarStyled src={url || 'https://img.webnovel.com/bookcover/12333953306291305/600/600.jpg'} {...rest} ref={ref} />
    </LazyLoad>
  )
})

const AvatarStyled = styled.img`
  object-fit: fill;
`
const AvatarPlaceholderStyled = styled.div<{ width: number; height: number }>`
  object-fit: fill;
  width: ${({ width }) => width}px;
  height: ${({ height }) => height}px;
`

ameerthehacker wrote this answer on 2020-10-30

@ZiiMakc can you share a minimal example in codesandbox

himanshunegi378 wrote this answer on 2020-12-20

You will find your answer here https://stackoverflow.com/a/5804278

More Details About Repo
Owner Name twobin
Repo Name react-lazyload
Full Name twobin/react-lazyload
Language JavaScript
Created Date 2015-08-07
Updated Date 2022-11-29
Star Count 5639
Watcher Count 52
Fork Count 482
Issue Count 153

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date