Next.js Images Rotating

[miau23]

Before opening, please confirm:

• I have checked to see if my question is addressed in the FAQ.
• I have searched for duplicate or closed issues.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.
• I have removed any sensitive information from my code snippets and submission.

App Id

d2cpp5fdm4eyuq

AWS Region

us-east-1

Amplify Hosting feature

Deployments

Frontend framework

React

Next.js version

13.5.4

Next.js router

App Router

Describe the bug

Next.js Images display with the correct orientation locally but when deployed to amplify are rotated 90 or 180 degrees for images that are wider or taller than the width/height given for the Image. They appeared correctly last week so it seems to be a newly introduced bug (last week/over this weekend). We also tried redeploying old builds to verify it wasn't an issue with any recent code changes and the images appeared rotated in all builds. To double check, we looked at a hosting environment we last deployed November 1st and saw the images all correctly oriented and then redeployed the exact same build and found the images were rotated. We have not changed anything in the build settings/env in 3 weeks. Due to all these factors we believe the issue is a result of a recent change to amplify causing next.js v13, node v18, and amplify to no longer support correct orientation for Next.js Images. If I go through and manually crop the image to be a square rather than a rectangular they no longer appear rotated.

Expected behavior

We expect Next.js Images to maintain their orientation between our local environment and deployment in an aws amplify environment. We expect Next.js images to maintain the behavior we saw prior to this week in which rectangular images were not rotated on deployment .

Reproduction steps

1. Build an app in next.js version 13.5.4
2. In the app display a list of images that utilize the next.js Image component (for exact reproduction have the image's source be an aws S3 bucket). Make sure to include images wider or taller than the height/width set for Image and use fill.
3. run the app locally and observe the orientation of the images
4. deploy the app in aws amplify with node version 18.x and look to see if any of the images have changed orientation.

Here is an example skeleton code snippet for building the image list using typescript and MUI

 import Image from "next/image";

<ImageListItem
          sx={{
            borderRadius: "10px",
            "&:hover": {
              cursor: "pointer",
              filter: "brightness(70%)",
            },
          }}
          id={item.id?.toString()}
          key={item.id?.toString()}
          cols={item.cols || 1}
          rows={item.rows || 1}
        >
<Image
      alt={"story"}
      src={`${S3URL}${item.imageKey}`}
      fill={true}
          style={{
              borderRadius: "10px",
              objectFit: "cover",
              overflow: "hidden",
            }}
      loading="lazy"
    />
        </ImageListItem>

Build Settings

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - nvm use 18
        - node -v
        - yarn install
    # IMPORTANT - Please verify your build commands
    build:
      commands:
        - yarn build
  artifacts:
    # IMPORTANT - Please verify your build output directory
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Additional information

Example of comparison between local and deployed website

local

amplify

local

amplify

[ferdingler]

Hi @miau23 , we are looking into this. Will update this thread shortly.

[ferdingler]

@miau23 , could you please provide the branch name where you see this issue and also, if you have some specific URL paths for the images where this is happening. Or request ids (Look for x-amz-cf-id header in the response)

[miau23]

@miau23 , could you please provide the branch name where you see this issue and also, if you have some specific URL paths for the images where this is happening. Or request ids (Look for x-amz-cf-id header in the response)

We saw the issue on our branch named development and did the deploy of the same build and also observed the issue on the staging branch. Here is an example of one of the images we find not flipped in local but flipped 180 degrees in amplify - 180 degree img example
and this is another that is rotated 90 degrees -90 degree img example
Both are shown in the second screenshot I included. Where can I get the request id?

[ferdingler]

ok, thanks for the information. Are these images in EXIF format by any chance?

[miau23]

ok, thanks for the information. Are these images in EXIF format by any chance?

Im not exactly sure. Heres the meta data for the first image I provided from Mac Preview Tools:

Lmk if that's not helpful or where to look to tell if it's EXIF format.

[ferdingler]

Thanks for bringing it to our attention @miau23. The issue has been mitigated. Source images that had a rotation specified in their metadata (EXIF, XMP, IPTC) were affected due to their orientation metadata being lost in the optimization process. Feel free to re-open the ticket if you have any further questions, and apologies for the inconvenience caused.

[github-actions]

⚠️COMMENT VISIBILITY WARNING⚠️

Comments on closed issues are hard for our team to see.
If you need more assistance, please open a new issue that references this one.

[github-actions]

This issue has been automatically locked.