Image optimization incorrectly returns 400

[fulopdaniel]

What version of Next.js are you using?

10.1.3

What version of Node.js are you using?

v12.18.3

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

Vercel

Describe the Bug

When supplying an AWS S3 URL to the Image component from next/image, an error is returned from the server saying "The requested resource isn't a valid image.".

This is a new feature, introduced in this commit:
9821140

However the content type of an image coming from S3 in my case is 'binary/octet-stream', so 400 status code is returned, because it does not start with "image/", and the picture does not load.

Using Next.js@10.0.1 does load the image, or using a simple img tag also works.

Expected Behavior

The image should be loaded.

To Reproduce

import Image from 'next/image';

<Image src={<INSERT_S3_URL>} height={200} width={100} />

[ElvisWong]

You can change the metadata in headers of your image in S3 from application/octlet-stream to image/jpeg. That will solve the problem.

[fulopdaniel]

Yes, but it is not possible in every scenario. For example we are using presigned URLs to upload the pictures, and I believe it is not possible to set the content-type automatically with that approach.

[shuding]

Closing as duplicate of #23523.

[jonahallibone]

@fulopdaniel it is

Yes, but it is not possible in every scenario. For example we are using presigned URLs to upload the pictures, and I believe it is not possible to set the content-type automatically with that approach.

@fulopdaniel It is, just send it along in the header of the request, or in the options object when creating the presigned URL

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.