React中使用MUI的Avatar组件时图片显示旋转如何解决

问题表现 #

在React项目中使用Material Design（MUI）开发时，在Card组件的CardHeader插槽内使用Avatar组件加载本地JPG图片，头像出现旋转显示异常。
异常效果：

核心复现代码：

<Card>
  <CardHeader
    avatar={
      <Avatar
        src={process.env.PUBLIC_URL + "/image.JPG"}
        alt="Masterman"
      ></Avatar>
    }
    // 其余业务代码
    ....
  />
</Card>

问题原因 #

异常根源是JPG图片的EXIF方向元数据未被正确识别：手机、相机拍摄产出的JPG文件通常会在EXIF信息中记录拍摄时的设备朝向，原生<img>标签渲染时，浏览器会自动读取该元数据将图片校正为正确朝向；但MUI的Avatar组件默认通过CSS背景图方式加载传入的src资源，CSS背景图不会自动解析EXIF方向信息，会直接按照图片原始像素方向渲染，最终出现旋转错位。

解决方法 #

根据实际场景选择对应方案即可：

• 静态资源优先方案：直接处理本地图片文件。使用系统自带的图片编辑器打开异常的JPG文件，手动旋转到正确朝向之后重新保存，替换项目中原有的图片文件即可。该方案无需修改任何业务代码，也不会增加运行时解析开销，是本地静态图片场景的最优选择。
• 代码快速修复方案：给Avatar组件传入imgProps属性，给内部渲染的图片元素添加自动识别EXIF方向的CSS配置，修改后代码如下：

<Card>
  <CardHeader
    avatar={
      <Avatar
        src={process.env.PUBLIC_URL + "/image.JPG"}
        alt="Masterman"
        imgProps={{
          style: { imageOrientation: 'from-image' }
        }}
      />
    }
    // 其余原有业务逻辑保持不变
    // ....
  />
</Card>

• 批量场景方案：如果项目中存在大量同类图片需要处理，可以引入专门处理EXIF方向的图片组件，自定义Avatar的图片渲染逻辑，全局统一校正图片方向，避免单个组件重复加配置。

内容的提问来源于stack exchange，提问作者Captai-N