Exif Orientation Image in React JS

Question

I am using https://www.npmjs.com/package/react-exif-orientation-img package and images doesn't get displayed correctly in react.js

Checked on chrome and mozilla but doesn't seem to work.

image-orientation css property works only in Chrome so using library.

import React, { Component } from 'react';
import ExifOrientationImg from 'react-exif-orientation-img';
import { Grid, Col, Row } from 'react-bootstrap';

class App extends Component {
  render() {
    const orientations = [1, 2, 3, 4, 5, 6, 7, 8];
    const images = [2];

    return (
      <div>

        <Grid fluid>

         <Row className="show-grid">
            {
              images.map(index =>
                <Col xs={3}>
                  <ExifOrientationImg
                    key={`demo_${index}`} className={'img-responsive'} 
                    src={`https://testexif.blob.core.windows.net/exifimages/${index}.jpg`}
                  />
                </Col>
            )}
          </Row>

          <Row className="show-grid">
            {
              orientations.map(index =>
                <Col xs={3}>
                  <ExifOrientationImg
                    key={`l_${index}`} className={'img-responsive'} 
                    src={`https://testexif.blob.core.windows.net/exifimages/Landscape_${index}.jpg`}
                  />
                </Col>
            )}
          </Row>

        </Grid>
      </div>
    );
  }
}

export default App;

For demo purpose the url of images are hardcoded with different orientations.

Below is the output

Output of all images should look like shown below.

Source Code Download

Steps:

• npm install
• yarn start