Images doesn't display as per orientation

[sharathm89]

I am loading the images from server. For testing purpose few images are uploaded.
Checked on chrome and mozilla but doesn't seem to work.

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.

[elliott-beach]

This works for me, are you sure this isn't a CORS error? (It did not work until I enabled cross-origin resource sharing with a chrome extension ; without it the library can't load the images for their EXIF data).

See https://guarded-fortress-80210.herokuapp.com/ for my repro.

[emresebat]

Hi
I was having this problem with AWS S3 and there is a simple solution by setting CORS configuration. Here is an article explaining with details.

[polinin]

Hi,
using ExifOrientationImg works perfect for desktop Chrome and Safari, but on iOS images are incorrectly rotated (both for Chrome and Safari). iOS 12.1.4
Does it even support mobile?

[pepf]

Just like @emresebat I also had this issue with Amazon S3 (any cross-origin image source really).

After some googling found out why only Chrome has this issue, even after setting CORS correctly on Amazon:

The simple solution seems to be to set <ExifOrientationImg crossOrigin="anonymous" ... which basically sets an Origin header on your image request, allowing it to cache properly from the start :)

I can imagine this "fix" could be coded into the library since this issue is very much related to the way exif-js works ( issue here ).
Or perhaps some notion of it somewhere in the readme?
Hosting images on an external host seems to be a pretty standard use case.

[bojanmiles]

Hi,
using ExifOrientationImg works perfect for desktop Chrome and Safari, but on iOS images are incorrectly rotated (both for Chrome and Safari). iOS 12.1.4
Does it even support mobile?

Have you found solution for this?

[polinin]

Hi,
using ExifOrientationImg works perfect for desktop Chrome and Safari, but on iOS images are incorrectly rotated (both for Chrome and Safari). iOS 12.1.4
Does it even support mobile?

Have you found solution for this?

Hi @MilePaor , we decided to use "blueimp-load-image" with { orientation:true } config.