Next.js - Static Images 400 error "The requested resource isn't a valid image."

[claptimes5]

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

drk0c55ymjt56

AWS Region

eu-west-3

Amplify Hosting feature

Deployments, Frontend builds, SSR

Frontend framework

Next.js

Next.js version

13.4.2

Next.js router

Pages Router

Describe the bug

Similar to this issue #3795, I didn't make any modifications to my app from Friday until today. Today, the all static images return a 400 error The requested resource isn't a valid image.

I tried redeploying staging branch with the exact commit on my main branch, but still have the image issue.

I have not redeployed production branch, but don't want to in case this issue expands there.

Looking at the compute logs, I can see this error:

The requested resource isn't a valid image for /_next/static/media/My-Logo-300.cfac4486.png received text/html; charset=utf-8

Expected behavior

Images are rendered correctly

Reproduction steps

1. Use the next <Image /> component to render some static images.
   

2. Deploy the app on Amplify.
   

3. Check for any static images that failed to load.
   

Build Settings

No response

Log output

The requested resource isn't a valid image for /_next/static/media/My-Logo-300.cfac4486.png received text/html; charset=utf-8

Additional information

No response

[ferdingler]

Hi @claptimes5 , thanks for letting us know. We are looking into it. It appears to be related to a trailing slash in the _next/image/?url= routes. Removing the trailing slash i.e. _next/image?url= resolves your images correctly. Let us look into it and will update this thread shortly. Apologies for the inconvenience.

[ferdingler]

@claptimes5 We mitigated the problem on your app. Can you help us confirm if you happen to have this setting disabled in your next.config.js?

module.exports = {
  trailingSlash: false,
}

[claptimes5]

It appears the problem is fixed!

Our config has trailingSlash: true,

[ferdingler]

Our config has trailingSlash: true,

ok, yeah that's what I meant, false is the default behavior, but looks like you changed it to true. It's okay, just wanted to check. Thanks for confirming.

[claptimes5]

Thanks for your help!

[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.

[ferdingler]

Hi @claptimes5, may I ask why are you using trailingSlash: true? I want to understand what's the usecase behind enabling that configuration. From what I understand in the documentation, https://nextjs.org/docs/app/api-reference/next-config-js/trailingSlash, the behavior for this feature is that all paths without a trailing slash will automatically be redirected to the same path with trailing slash. Example: /foo will be redirected to /foo/. But why would you want that? Thanks

[claptimes5]

It's been a year and a half since we added that change, so I'm not 100% sure.

I think it's related to how we were previously deploying this code in S3 and Cloudfront (SSG). We needed the / so that we could look up the right generated directory/page in S3. It probably isn't necessary anymore on Amplify.

[ferdingler]

It's been a year and a half since we added that change, so I'm not 100% sure.

I think it's related to how we were previously deploying this code in S3 and Cloudfront (SSG). We needed the / so that we could look up the right generated directory/page in S3. It probably isn't necessary anymore on Amplify.

ah, that makes sense. Ok, yeah you shouldn't need it on Amplify Hosting. But thanks for the info. It helps!

[jonathantp]

Hello, our images on Next.js + Amplify have also started generating 400s due to this issue. We have trailing slash = true as well. For SEO purposes, it can cause problems with duplicate content and crawl efficiency if your pages are accessible with and without a trailing slash, so although somewhat a matter of preference, we force the slash. Also, the interpretation of relative urls can get a bit messy if you are mixing trailing slash styles. Further discussion here: https://stackoverflow.com/a/16445016/417697 . I should add that just leaving the default of "false" would also accomplish the same thing (consistency along with a forced redirect), but somebody made the design choice to set it to true back when we started building the app a couple years ago, so for a lot of reasons we would prefer not change it back.

[ferdingler]

@jonathantp thanks for bringing this up. No problem, you don't need to change anything. We are actively working on addressing this. Can I have your AppId please?

[jonathantp]

App Id: d32860zbav175e

Note we moved the main branch and associated dns entry to point to a hosted docker container to get the images working again earlier today

[ferdingler]

Note we moved the main branch and associated dns entry to point to a hosted docker container to get the images working again earlier today

Sorry to hear. We have addressed this issue in the us-east-2 region. Let us know if you still face it.

[Narrator]

This issue should now be resolved in all regions. Please reopen the issue if you continue to face problems. Thank you!

[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.