Cfrgtkky

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.

Example: https://codesandbox.io/s/k9kwv0kp93

Example code:

index.js

import React from 'react';

import { render } from 'react-dom';

import Hello from './Hello';



const styles = {

  fontFamily: 'sans-serif',

  textAlign: 'center',

};



const App = () => (

  <div style={styles}>

    <Hello name="CodeSandbox" />

    <h2>Start editing to see some magic happen {'u2728'}</h2>

  </div>

);



render(<App />, document.getElementById('root'));

Hello.js

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 = <img src="http://via.placeholder.com/350x150" alt="" />;

    //manipulate here maybe

    this.setState({

      img

    })

  }



  render()

  {

    return (

      <div>

        <button onClick={this.get_image}>Click me</button>

        test

        {this.state.img}

      </div>

    )

  }

}

React supports a special attribute that you can attach to any component. The ref attribute takes a callback function, and the callback will be executed immediately after the component is mounted or unmounted.

When the ref attribute is used on an HTML element, the ref callback receives the underlying DOM element as its argument

Taken from: https://facebook.github.io/react/docs/refs-and-the-dom.html

class MyComponent extends React.Component {

  constructor(props) {

    super(props);

  }



  handleSize(image) {

    console.log(image.offsetWidth, image.offsetHeight)

  }



  render() {

    return React.createElement("img", {

      src: "http://cdn.collider.com/wp-content/uploads/2016/07/narcos-season-2-image-5.jpg",

      ref: image => {

        this.handleSize(image);

      }

    });

  }

}



ReactDOM.render(React.createElement(MyComponent, null), document.getElementById('root'))

img {

  width: 200px;

  height: 133px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-with-addons.min.js">

</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>



<div id="root"></div>

i encountered the same issue, i was able to get the img height/width using refs and onLoad.

render() {

   return (

     <img

        src='https://via.placeholder.com/150'

        ref={el = this.imgEl = el}

        onLoad={() => console.log(this.imgEl.naturalHeight)} // print 150

     /> 

  )

}

Also you should use img.naturalHeight