来自 AWS S3 存储桶的图像在 React App 中旋转答案

【问题标题】：Images from an AWS S3 bucket being rotated in React App来自 AWS S3 存储桶的图像在 React App 中旋转
【发布时间】：2019-07-30 17:46:41
【问题描述】：

我有一个应用程序，用户可以在其中拍照并将图像存储在 AWS S3 存储桶中。然后，我的应用程序将保存图像的 URL，以便用户稍后可以查看图像。如果我去我的 S3 存储桶并查看图像，它会以正确的方向显示。但是，当我在我的 React 应用程序中使用图像的 URL 时，图像会旋转 90 度。

当拍摄图像时，会立即声明文件名，并且图像的 URL 会立即保存到数据库中。由于当我直接转到 S3 存储桶或 URL 时图像没有出现旋转，我假设问题与我尝试访问 S3 存储桶的方式有关。

当我的应用尝试访问 S3 存储桶时，这是唯一使用的代码：

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

其中 this.props.url 是拍摄图像时存储的 URL。

我真的不知道为什么要旋转图像，因为这里使用的代码很少。

【问题讨论】：

这更可能与 CardMedia 组件有关。虽然你在这里写的代码不多，但 CardMedia 组件将包含很多东西。它可能正在旋转您的图像 - 检查文档
CardMedia 的来源可以在here 找到。我没有看到任何会导致图像旋转的东西。你能在CodeSandbox 中重现这个吗？
你试过只使用<img />标签，它是否也被旋转了？还是仅在使用CardMedia 时才旋转？另外，classes.img 里面的 css 是什么？
我按照要求创建了一个 CodeSandbox link 我开始怀疑问题是否出在我的 CSS 中。我也尝试使用标签，但这并不能解决问题。
@RyanCogswell 实际上，我只是尝试使用一个新的沙箱，并且只在我的链接中添加一个标签（没有 CSS）并且图像仍在旋转！

标签： javascript reactjs material-ui

【解决方案1】：

实际图像是横向的，宽度为 4032，高度为 3024。它的 EXIF 元数据表明：

方向：旋转 90

某些照片查看器会支持此功能（包括当您直接在 Chrome 中调出图像文件时），但 <img> 标记不支持此功能。

相关问题：

在 Firefox 中，这个非常简单的解决方案（提到 here）有效：

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);

【讨论】：

感谢 Ryan，当我尝试搜索有关 EXIF 轮换问题的更多信息时，我真的只能找到 2 年前的帖子。您知道是否实施了简单的解决方案吗？
我不知道解决方案是否“简单”，但您需要读取图像的 EXIF 旋转，然后相应地旋转图像。我在我的答案中添加了另一个参考，可能会有所帮助。