React JS中的Exif定向图像

Question

我正在使用https://www.npmjs.com/package/react-exif-orientation-img包，并且图像无法在react.js中正确显示

检查了chrome和mozilla，但似乎不起作用。

image-orientation css属性仅在Chrome中有效，因此请使用库。

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;

出于演示目的，图像的网址以不同的方向进行了硬编码。

下面是输出

所有图像的输出应如下所示。

源代码下载

脚步：

• npm安装
• 纱线开始