title: react - get width/height of image to process
body: <p>I was wondering how to get the height and width of an image if I'm rendering it react style so I can process it to flip it to portrait mode if the width is larger than the height.</p>
  
  <p>Example: <a href="https://codesandbox.io/s/k9kwv0kp93" rel="noreferrer">https://codesandbox.io/s/k9kwv0kp93</a></p>
  
  <p>Example code: </p>
  
  <p>index.js</p>
  
  <pre><code>import React from 'react';
  import { render } from 'react-dom';
  import Hello from './Hello';
  
  const styles = {
    fontFamily: 'sans-serif',
    textAlign: 'center',
  };
  
  const App = () =&gt; (
    &lt;div style={styles}&gt;
      &lt;Hello name="CodeSandbox" /&gt;
      &lt;h2&gt;Start editing to see some magic happen {'\u2728'}&lt;/h2&gt;
    &lt;/div&gt;
  );
  
  render(&lt;App /&gt;, document.getElementById('root'));
  </code></pre>
  
  <p>Hello.js</p>
  
  <pre><code>import React, {Component} from 'react';
  
  export default class Hello extends Component
  {
    constructor()
    {
      super();
      this.state = {img: null}
  
      this.get_image = this.get_image.bind(this);
    }
  
    get_image() 
    {
      let img = &lt;img src="http://via.placeholder.com/350x150" alt="" /&gt;;
      //manipulate here maybe
      this.setState({
        img
      })
    }
  
    render()
    {
      return (
        &lt;div&gt;
          &lt;button onClick={this.get_image}&gt;Click me&lt;/button&gt;
          test
          {this.state.img}
        &lt;/div&gt;
      )
    }
  }
  </code></pre>