LazyLoadWrapper height is wrong
ziimakc opened this issue · 3 comments
ziimakc commented
Why is that LazyLoadWrapper has height + 5px thats create unnecessary margin?
// 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 commented
@ziimakc can you share a minimal example in codesandbox
ziimakc commented
himanshunegi378 commented
You will find your answer here https://stackoverflow.com/a/5804278