"url" parameter is valid but upstream response is invalid — next/image on 11.1

[jonahallibone]

What version of Next.js are you using?

11.1

What version of Node.js are you using?

14.16.0

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

serverless-next.js

Describe the Bug

My images are served via S3 and signed urls. They worked locally (using next dev) until I upgraded to Next.js@11.1 this morning. I previously had an issue with this, where the MIME types were binary/octet-stream but have since changed the MIME types to image/jpg, and have had no trouble since then. I also now know that image/jpeg is preferable to image/jpg however I am unsure if this is the issue. The only error I get back is

"url" parameter is valid but upstream response is invalid

If I downgrade to Next@11.0.1, the issue is resolved.

Expected Behavior

Next image would return me my optimized image, not a 400 bad request with

"url" parameter is valid but upstream response is invalid

I see that in next.js/image-optimizer.ts this comes from a failed fetch on the href. I am curious why this would be the case now, and not in previous versions. Thinking perhaps this was a CORS error (somehow, really just trying anything) I changed my bucket policy. Error persists.

To Reproduce

Use an image signed by S3 with the MIME type of image/jpg

[styfle]

Can you share the URL thats failing?

The issue might be caused by one of these PRs:

• URI-encode url parameter in image optimizer #27671
• Fix image content type octet stream 400 #26705

[sakhro]

Have the same problem for images that are served via firebase. Here the image url

[styfle]

It looks like the issue is caused by #27671

I'll submit a PR with a fix, thanks!

[jonahallibone]

@styfle Url for my issue is here

PS glad it wasn't #26705 because that closed an issue I also opened about MIME types with next/image lol

[styfle]

This has been fixed in v11.1.1-canary.5.

You can try it out today with yarn add next@canary, thanks!

[FDiskas]

Can confirm ^11.1.1-canary.8 works. and on latest ^11.1.0 not working
Trying to use Image component on remote image https://ddxyd64xk465n.cloudfront.net/images/library/images/Supplier%20Web%20Images/Corella%20Fine%20Foods/Caesar.jpg