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?

Use `useRef` instead of `document.getElementById`. Maybe it solves your problem, maybe not, but it's the "React way" of getting the DOM element reference. — Rafael Tavares, Jan 06 '22 at 14:36
The problem is that I create the image and want to show its height in one statement. Not sure useRef helps, but will try. — GRZa, Jan 06 '22 at 14:39

score 3 · Accepted Answer · edited Jan 06 '22 at 14:50

3

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>
);

edited Jan 06 '22 at 14:50

3limin4t0r

19,353
2
31
52

answered Jan 06 '22 at 14:44

BenM

52,573
26
113
168

Thanks, but wouldn't it has the same issue as my previous code? I think useEffect() would work, but not sure where to call it – GRZa Jan 06 '22 at 16:17
1

It won't have the same issue, since the dimensions are generated whenever the ref changes. – BenM Jan 06 '22 at 16:39
1

I think I figured out my problem - naturalWidth/naturalHeight are updated when the image is fully loaded - that's why the code returns 0 rather than actual size. Now trying to figure out how to use onLoad to rerender the value in React – GRZa Jan 06 '22 at 18:14

GRZa · Answer 2 · 2022-01-07T17:44:58.890

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>

Creating image and simultaneously displaying its dimensions in React

2 Answers2