Next/image - Source is not an image

Support
1

Hi,

None of external images load when my NextJS app is deployed to Netlify. All those images return 502 with “Source is not an image” as the payload.

It works as expected on development and production (npm run build and npm run start) on my local machine. The issue happens when the app is deployed to Netlify.

I’ve tried these:

  • Installing sharp package (npm i sharp)
  • Checking the external paths
  • Adding the domain to the next.config.js
  • Deploying the app multiple times to make sure everything is deployed correctly
  • Checking the logs to make sure no error / warning is logged
2 Likes
2

I have the same problem.
You can see it at [brilliant-capybara-c036b9.netlify.app](https:// brilliant-capybara-c036b9.netlify.app)

direct image URL
https://brilliant-capybara-c036b9.netlify.app/_ipx/w_1920,q_75/https%3A%2F%2Fxxzqhkwcmsvxgmqznltv.supabase.co%2Fstorage%2Fv1%2F%2Fobject%2Fpublic%2Fspotlight-photos%2Fpublic%2F77c5d5af6d04235efc18b5561a1830b9786a2eb851303dfda1da0fda9fba3298.jpg?url=https%3A%2F%2Fxxzqhkwcmsvxgmqznltv.supabase.co%2Fstorage%2Fv1%2F%2Fobject%2Fpublic%2Fspotlight-photos%2Fpublic%2F77c5d5af6d04235efc18b5561a1830b9786a2eb851303dfda1da0fda9fba3298.jpg&w=1920&q=75

1 Like
3

The same problem but with images served by AWS s3

4

Do any of your images serve with the content type image/*. If not, this is expected. You need to make sure your images are always served with the correct content type header.

1 Like
6

Interesting. I get the following headers for one of the images. As you can see, the Content-Type header is set to application/octet-stream and I think that’s because I transformed the uploaded image using sharp package on the server side. I will test that part of transforming and will let you know soon.

**HTTP/1.1 200 OK** =>
**Date** => Sun, 15 May 2022 21:26:42 GMT
**Content-Type** => application/octet-stream
**Content-Length** => 31948
**Connection** => close
**last-modified** => Mon, 02 May 2022 17:43:33 GMT
**x-rgw-object-type** => Normal
**etag** => "569a53defc767c3f3a70f2b3da102f49"
**x-amz-request-id** => tx0000000000000022c7702-0062817011-11e29459-default
**access-control-allow-origin** => *
**access-control-allow-credentials** => true
**access-control-allow-headers** => Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range
**access-control-allow-methods** => GET,POST,OPTIONS,PUT,DELETE,PATCH
**Server** => ArvanCloud
**X-XSS-Protection** => 1; mode=block
**AR-PoweredBy** => Arvan Cloud (arvancloud.com)
**AR-SID** => 5750
**AR-ATIME** => 0.319
**AR-CACHE** => BYPASS
**AR-Request-ID** => d04854f2c4cc2b52752c80a81a1b6d47
**Accept-Ranges** => bytes
7

I set the content type of for AWS before uploading the file and it fixed the issue. Thanks for your help :pray:

const uploadParams: PutObjectCommandInput = {
      Bucket: 'bucket_name',
      Key: 'file_name',
      ACL: 'public-read',
      ContentType: 'image/jpg', // this fixed the issue
    };