Creating image and simultaneously displaying its dimensions in React

Question

I am trying to create an image (based on src) and also show its dimensions at the same time.

I tried

const DisplayImage = () => {
 const [src,setSrc]=useState('');

 return (
   <div>
    {src===''?'':<img id='my-img' src={image} alt='some text' />}
    {document.getElementById('my-img')?.naturalHeight}
   </div>);
 }

Of course, it's not working (the image does not exist when I try to find its height).

I also tried to do it in a JavaScript way, creating an Image() and calling document.appendChild to the document, but it is probably not the right way of doing it in React.

Is there a better way of doing it?

Answer 1

You can use a callback ref, and store the values in a state variable to display them later using a useEffect() hook or similar. For example:

const [ imageHeight, setImageHeight ] = useState(null);
const [ imageWidth, setImageWidth ] = useState(null);
const [ imageSource, setImageSource ] = useState(null);

const imageMeasurements = useCallback(image => {
    if (image !== null) {
      setImageWidth(image.naturalWidth);
      setImageHeight(image.naturalHeight);
    }
}, [ ]);

return (
  <div>
    { imageSource !== null && (
      <img ref={ imageMeasurements } src={ imageSource } alt="some text" />
    )}

    { (imageWidth !== null && imageHeight !== null) && (
      <span class="image__dimensions">{imageWidth} x {imageHeight}</span>
    )}
  </div>
);

Answer 2

I'd like to post the solution I ended up with, because even though @BenM answered my question perfectly, the solution did not work for me for naturalWidth/naturalHeight props. They were shown as zeros.

I think the problem is that those props are populated only after the image is fully loaded, as described here.

To get it working, I placed the logic in onLoad instead, so my code looks like:

const [imageSource,setImageSource]=useState('');


const [ imageHeight, setImageHeight ]=useState(null);
const [ imageWidth, setImageWidth ]=useState(null);   
const imgRef = React.createRef();


<div> { imageSource !== null && (
   <img 
     src={imageSource} 
     alt='should be something'
     ref={imgRef}
     onLoad={() =>{ setImageHeight(imgRef.current.naturalHeight); 
                    setImageWidth(imgRef.current.naturalWidth); }
            }
    /> 
   { imageWidth &&
     <div 
      className="image_dimensions">
      Image size: {imageWidth} x {imageHeight}
     </div>
   })
</div>