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