React中使用react-exif-orientation-img组件图片显示异常问题排查

我之前在项目里用这个库时也踩过类似的坑，结合你的情况，给你几个具体的排查和解决方向：

1. 检查图片路径与CORS配置 #

首先确认图片的src是否正确：

• 如果是本地静态资源，确保路径是Webpack能正确解析的（比如用import img from './test.jpg'引入，而不是直接写相对路径）
• 如果是远程图片，必须确保服务器配置了CORS允许读取Exif数据——这个库需要读取图片的Exif信息来处理旋转，跨域图片如果没有正确的CORS头，浏览器会阻止读取Exif，导致库无法工作，图片自然显示不出来。

2. 验证库的基础使用是否正确 #

你的代码只贴了部分，检查是否给ExifOrientationImg传递了必要的props，完整的正确示例应该是这样：

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];
    return (
      <Grid>
        <Row>
          {orientations.map(orient => (
            <Col key={orient} xs={3}>
              {/* 确保src正确，并且添加基础宽高样式 */}
              <ExifOrientationImg
                src={`/path/to/your-image-with-orient-${orient}.jpg`}
                style={{ width: '100%', height: 'auto' }}
                alt={`Orientation ${orient}`}
              />
            </Col>
          ))}
        </Row>
      </Grid>
    );
  }
}

export default App;

注意：一定要给图片设置宽高样式，否则即使加载成功也可能因为没有尺寸而看不到内容。

3. 排查库版本与浏览器兼容问题 #

• 先升级到这个库的最新版本，旧版本可能存在Firefox的兼容bug
• 打开浏览器控制台，查看是否有报错（比如Failed to load Exif data这类提示），这能直接定位问题根源

4. 备用方案：手动处理Exif旋转 #

如果这个库还是不生效，可以试试用exif-js手动读取旋转信息，再结合CSS处理：

import React, { Component } from 'react';
import EXIF from 'exif-js';
import { Grid, Col, Row } from 'react-bootstrap';

class App extends Component {
  state = {
    imageOrientations: {}
  };

  componentDidMount() {
    const orientations = [1, 2, 3, 4, 5, 6, 7, 8];
    orientations.forEach(orient => {
      const img = new Image();
      img.crossOrigin = 'anonymous'; // 跨域图片必须设置
      img.src = `/path/to/your-image-with-orient-${orient}.jpg`;
      img.onload = () => {
        EXIF.getData(img, () => {
          const orientation = EXIF.getTag(img, 'Orientation');
          this.setState(prev => ({
            imageOrientations: { ...prev.imageOrientations, [orient]: orientation }
          }));
        });
      };
    });
  }

  getRotationStyle(orientation) {
    switch(orientation) {
      case 6: return { transform: 'rotate(90deg)' };
      case 3: return { transform: 'rotate(180deg)' };
      case 8: return { transform: 'rotate(270deg)' };
      default: return {};
    }
  }

  render() {
    const orientations = [1, 2, 3, 4, 5, 6, 7, 8];
    return (
      <Grid>
        <Row>
          {orientations.map(orient => (
            <Col key={orient} xs={3}>
              <img
                src={`/path/to/your-image-with-orient-${orient}.jpg`}
                style={{ 
                  width: '100%', 
                  height: 'auto',
                  ...this.getRotationStyle(this.state.imageOrientations[orient])
                }}
                alt={`Orientation ${orient}`}
              />
            </Col>
          ))}
        </Row>
      </Grid>
    );
  }
}

export default App;

内容的提问来源于stack exchange，提问作者Sharath