next.js: 502: BAD_GATEWAY Code: OPTIMIZED_EXTERNAL_IMAGE_REQUEST_UNAUTHORIZED

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.4.0: Mon Mar  6 20:59:28 PST 2023; root:xnu-8796.101.5~3/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.12.1
      npm: 8.19.2
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.4.4-canary.0
      eslint-config-next: 13.4.3
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.0.4

        Read more - https://nextjs.org/docs/messages/opening-an-issue

Which area(s) of Next.js are affected? (leave empty if unsure)

Image optimization (next/image, next/legacy/image), Middleware / Edge (API routes, runtime)

Link to the code that reproduces this issue or a replay of the bug

https://github.com/athoteldev/vercel-function-test

To Reproduce

_Repo deployed here: https://vercel-function-test-xi.vercel.app/_

---

Render this image URL “https://i.travelapi.com/lodging/1000000/460000/454900/454858/4c22a082_z.jpg” using the NextJS Image tag:

<Image src="https://i.travelapi.com/lodging/1000000/460000/454900/454858/4c22a082_z.jpg" width={250} height={200} alt="test"></Image>

For comparison, you can display the image using a normal HTML img tag:

<img src="https://i.travelapi.com/lodging/1000000/460000/454900/454858/4c22a082_z.jpg" alt="test" width={250} height={200}/>

Another comparison is using the NextJS image tag with this image that works: https://i.travelapi.com/lodging/1000000/460000/454900/454858/ad5110b6_z.jpg

<Image src="https://i.travelapi.com/lodging/1000000/460000/454900/454858/ad5110b6_z.jpg" width={250} height={200} alt="test">

Describe the Bug

Getting this error on Vercel only. Localhost works correctly:

502: BAD_GATEWAY
Code: OPTIMIZED_EXTERNAL_IMAGE_REQUEST_UNAUTHORIZED
ID: fra1::9tc2j-1684534414078-b51eb4829f2b

URL of the image that doesn’t work: https://athotel.com/_next/image?url=https%3A%2F%2Fi.travelapi.com%2Flodging%2F1000000%2F460000%2F454900%2F454858%2F4c22a082_z.jpg&w=1200&q=75

A similar image URL that works: https://athotel.com/_next/image?url=https%3A%2F%2Fi.travelapi.com%2Flodging%2F1000000%2F460000%2F454900%2F454858%2Fad5110b6_z.jpg&w=1200&q=75

The images above are all public as you can see if you access them directly by taking the url query parameter and decode the value:

• works: https://i.travelapi.com/lodging/1000000/460000/454900/454858/4c22a082_z.jpg
• works: https://i.travelapi.com/lodging/1000000/460000/454900/454858/ad5110b6_z.jpg

Again, these URLs both work on localhost (http://localhost:3000/_next/image?url=https%3A%2F%2Fi.travelapi.com%2Flodging%2F1000000%2F460000%2F454900%2F454858%2F4c22a082_z.jpg&w=828&q=75)

Here is the live page with the issue. The placeholder that says “No image available” should’ve been the image that errors out

Expected Behavior

For the image to be displayed with no error.

Which browser are you using? (if relevant)

all of them

How are you deploying your application? (if relevant)

Vercel