¿Cómo obtener la altura y el ancho de una imagen usando ReactJS?

Al reaccionar todo lo que escribimos que parece HTML, en realidad no es HTML puro. Todas las cosas que parecen HTML son JSX, Detrás de la escena, se convierten a JavaScript estándar usando babel. Todos estos funcionan de esta manera para facilitar la vida de los desarrolladores. Dado que JSX no es HTML, es por eso que tenemos una referencia directa a los elementos HTML y es por eso que no podemos obtener directamente las propiedades de ningún elemento HTML. Para obtener la propiedad de los elementos, React da algo llamado ‘ref’. Usando ref podemos crear una referencia directa a cualquier elemento HTML y controlar las propiedades de los elementos HTML. Aquí usamos el sistema ‘ref’ para obtener la altura y el ancho de la imagen.

Ejemplo 1: Este ejemplo ilustra cómo obtener la altura y el ancho actuales de la imagen.

• índice.js:

  JavaScript

  import React from 'react' import ReactDOM from 'react-dom' import App from './App'    ReactDOM.render(<App />, document.querySelector('#root'))

• Aplicación.js:

  JavaScript

  import React, { Component } from 'react' class App extends Component{   constructor(props){      super(props)         // Initialize count state      this.state = {show : false}     // Bind context of 'this'     this.handleClick = this.handleClick.bind(this)     // Create reference of DOM object     this.imgRef = React.createRef()   }       renderDetails() {     return this.state.show ?        // Accessing image details using imgRef       <div>            <p><strong>Height : </strong>          {this.imgRef.current.clientHeight}px</p>               <p><strong>Width : </strong>          {this.imgRef.current.clientWidth}px</p>          </div> : null   }      handleClick(){        // Update state value     this.setState({       show : true     })   }      render(){     return(        <div>          <h3>GeeksforGeeks</h3>         {/* Assign reference to DOM element     */}         <img ref={this.imgRef} src= 'https://media.geeksforgeeks.org/wp-content/uploads/20200617121258/gfg-image2-300x177.png' alt='gfg' />         <div>           <button onClick={this.handleClick}>Get image details</button>         </div>         {this.renderDetails()}       </div>         )     }  } export default App

Producción :

Ejemplo 2: 

• índice.js:

  JavaScript

  import React from 'react' import ReactDOM from 'react-dom' import App from './App'    ReactDOM.render(<App />, document.querySelector('#root'))

• Aplicación.js:

  JavaScript

  import React, { Component } from 'react' class App extends Component{   constructor(props){      super(props)         // Initialize count state      this.state = {height:null, width:null, isIncrease:false}        // Bind context of 'this'     this.handleClick = this.handleClick.bind(this)        // Create reference of DOM object     this.imgRef = React.createRef()   }       handleClick(){        // Fetching current height and width     const height = this.imgRef.current.clientHeight     const width = this.imgRef.current.clientWidth     alert(`       Height : ${height}       Width : ${width}     `)   }      render(){     return(        <div>          <h3>GeeksforGeeks</h3>         {/* Assign reference to DOM element     */}         <img ref={this.imgRef} src= 'https://media.geeksforgeeks.org/wp-content/uploads/20200819170816/colorfulbulmaheroelements-300x154.png' alt='gfg' />         <div>           <button onClick={this.handleClick}>             Fetch dimension           </button>         </div>       </div>         )     }  } export default App

Producción :