0

here is my code

        {isVisible?
            <Image
                ref = {imageRef}
                src={url}
                fit="contain"
            />
            :
            <Box 
                sx={
                    {height:imageRef.current?.offsetHeight,
                    width:imageRef.current?.offsetWidth}   
                }>
                    
            </Box>
        }

Is there any way to get Image height and width when isVisible is false?

I have tried like above，if isVisible is false Box can't get height and width in the first render,imageRef.current.offsetHeight is undefined.

wanghq
  • 1
  • 2
  • You could construct an [Image](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image) node with the same image `src`, then access the `naturalWidth` and `naturalHeight` properties in its `onload` event? This would let you capture the dimensions of the image before your `Image` component is mounted in the DOM. – Roo Jun 25 '23 at 06:54
  • Does this answer your question? https://stackoverflow.com/questions/623172/how-to-get-the-image-size-height-width-using-javascript – Lin Du Jun 25 '23 at 07:28

0 Answers0