Estoy tratando de crear una imagen (basada en src ) y también mostrar sus dimensiones al mismo tiempo.
Lo intenté
const DisplayImage = () => { const [src,setSrc]=useState(''); return ( <div> {src===''?'':<img id='my-img' src={image} alt='some text' />} {document.getElementById('my-img')?.naturalHeight} </div>); }Por supuesto, no funciona (la imagen no existe cuando trato de encontrar su altura).
También traté de hacerlo en forma de JavaScript, creando una Image() y llamando a document.appendChild al documento, pero probablemente no sea la forma correcta de hacerlo en React.
¿Hay una mejor manera de hacerlo?
Puede usar una referencia de devolución de llamada y almacenar los valores en una variable de estado para mostrarlos más tarde usando un gancho useEffect() o similar. Por ejemplo:
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> );Me gustaría publicar la solución con la que terminé, porque aunque @BenM respondió perfectamente a mi pregunta, la solución no funcionó para mí para los accesorios naturalWidth/naturalHeight . Se mostraron como ceros.
Creo que el problema es que esos accesorios se completan solo después de que la imagen está completamente cargada, como se describe aquí .
Para que funcione, coloqué la lógica en onLoad , por lo que mi código se ve así:
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>