1

I have an app where a user takes can take a photo and store the image in an AWS S3 bucket. My app will then save the URL for the image so that the user can view the image at a later time. If I go to my S3 bucket and look at an image it appears in the correct orientation. However when I use the URL for the image in my React app the image appears rotated 90 degrees.

When the image is taken a file name is immediately declared and the URL for the image is immediately saved to the database. Since the images don't appear rotated when I go directly to the S3 bucket or the URL I am assuming the issue has to be something with the way I am trying to access the S3 bucket.

When my app tries to access the S3 bucket this is the only code that is used:

<CardMedia 
    className={classes.img}
    image={this.props.url}
 />

Where this.props.url is the URL which was stored when the image was taken.

I really can't figure out why the image is being rotated as there is very little code being used here.

Ray
  • 2,713
  • 3
  • 29
  • 61
tdammon
  • 610
  • 2
  • 13
  • 39
  • It's more likely to do with the CardMedia component. Although *you* haven't written much code here, the CardMedia component will contain a lot of stuff. It is probably rotating your image - check the docs – Alex Jul 30 '19 at 17:54
  • The source for `CardMedia` can be found [here](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/CardMedia/CardMedia.js). I don't see anything that would cause image rotation. Can you reproduce this in a [CodeSandbox](https://codesandbox.io/s/new)? – Ryan Cogswell Jul 30 '19 at 20:43
  • have you tried it with only using an `` tag, is it also rotated? or is it only rotated when using `CardMedia`? Also, what is the css inside `classes.img` ? – Moe Jul 31 '19 at 04:58
  • I created a CodeSandbox as requested [link](https://codesandbox.io/s/blissful-cray-r5ubw) I am starting to wonder if the issue is in my CSS. Also I tried using the tag and that does not fix the issue. – tdammon Jul 31 '19 at 13:05
  • @RyanCogswell In fact, I just tried using a fresh sandbox and only adding an tag with my link (no CSS) and the image is still being rotated! – tdammon Jul 31 '19 at 13:11

1 Answers1

1

The actual image is sideways and has a width of 4032 and a height of 3024. It has EXIF metadata that indicates:

Orientation: rotate 90

This is honored by some photo viewers (including when you bring up the image file directly in Chrome), but is not honored by the <img> tag.

Related questions:

In Firefox, this wonderfully simple solution (mentioned here) works:

import React, { Component } from "react";
import ReactDOM from "react-dom";

class App extends Component {
  render() {
    return (
      <img
        style={{ maxWidth: "400px", imageOrientation: "from-image" }}
        src="https://beerphotos.s3.us-east-2.amazonaws.com/5_1562813789722"
      />
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Edit image orientation

Ryan Cogswell
  • 75,046
  • 9
  • 218
  • 198
  • Thanks Ryan, when I try to search more about the EXIF rotation issue I can really only find posts from 2+ years back. Do you know if an easy solution has been implemented? – tdammon Jul 31 '19 at 18:35
  • I don't know if the solution is "easy", but you would need to read the EXIF rotation of the image and then rotate the image accordingly. I've added another reference to my answer that may be helpful. – Ryan Cogswell Jul 31 '19 at 18:43