Get dimensions of image with React

Question

I need to get the dimensions of an image with React. I found a library called react-measure that computes measurements of React components. It works, but I can't get it to fire when the image has loaded. I need to get it to fire when the image loads so I get accurate dimensions and not 0 x 157 or something like that.

I tried using the onLoad Image Event to detect when the image has loaded, but I didn't get satisfactory results. Essentially what I've done is when the image has loaded (handleImageLoaded() has been called), change the hasLoaded state property to true. I know for a fact that hasLoaded has been changed to true because it says so: Image Loaded: true.

What I noticed is that I can calculate the dimensions for only images that have been cached...

Here is a demo video: cl.ly/250M2g3X1k21

Is there a better, more concise way of retrieving dimensions properly with React?

Here is the code:

import React, {Component} from 'react'; import Measure from '../src/react-measure'; class AtomicImage extends Component {      constructor() {         super();         this.state = {             hasLoaded: false,             dimensions: {}         };         this.onMeasure = this.onMeasure.bind(this);         this.handleImageLoaded = this.handleImageLoaded.bind(this);     }      onMeasure(dimensions) {         this.setState({dimensions});     }      handleImageLoaded() {         this.setState({hasLoaded: true});     }      render() {          const {src} = this.props;         const {hasLoaded, dimensions} = this.state;         const {width, height} = dimensions;          return(             <div>                 <p>Dimensions: {width} x {height}</p>                 <p>Image Loaded: {hasLoaded ? 'true' : 'false'}</p>                 <Measure onMeasure={this.onMeasure} shouldMeasure={hasLoaded === true}>                     <div style={{display: 'inline-block'}}>                         <img src={src} onLoad={this.handleImageLoaded}/>                     </div>                 </Measure>             </div>         );     } }  export default AtomicImage; 

Here is the parent code. It's not really important—just passes src to the AtomicImage element:

import React, {Component} from 'react'; import ReactDOM from 'react-dom'; import AtomicImage from './AtomicImage';  class App extends Component {    constructor() {     super();     this.state = {src: ''}     this.handleOnChange = this.handleOnChange.bind(this);   }    handleOnChange(e) {     this.setState({src: e.target.value});   }    render() {      const {src} = this.state;     return (       <div>         <div>           <input onChange={this.handleOnChange} type="text"/>         </div>         <AtomicImage src={src} />       </div>     )   }  }  ReactDOM.render(<App />, document.getElementById('app')); 

Answer 1

way of retrieving dimensions

You can achieve your goal just by js: through offsetHeight, offsetWidth. In order to get the img's dimensions, img must be visible. You can't get dimensions from a cached img.

example: https://jsbin.com/jibujocawi/1/edit?js,output

class AtomicImage  extends Component {    constructor(props) {         super(props);         this.state = {dimensions: {}};         this.onImgLoad = this.onImgLoad.bind(this);     }     onImgLoad({target:img}) {         this.setState({dimensions:{height:img.offsetHeight,                                    width:img.offsetWidth}});     }     render(){         const {src} = this.props;         const {width, height} = this.state.dimensions;          return (<div>                 dimensions width{width}, height{height}                 <img onLoad={this.onImgLoad} src={src}/>                 </div>                );     } }