External images using next/image returning 502 after deployment

[ystewart]

Hello,

I am currently using the next/image component to load external images from a self-hosted CDN. When I run the app in development mode on my local machine the images are loading fine, but after deploying I see that the these images are broken and that they return a 502 error after some time. Has any body had this issue?

[CarlosRangel17]

Hi,

I am also experiencing the same issue reported by @ystewart.

We recently upgraded from Next.js 10.1.3 to 11.1.2, and started seeing the issue occur ~ running locally our images fetch perfectly fine client-side from an internal self-hosted CDN; however, once deployed we are seeing the images broken and seeing the 502 error...

It seems if we use the pure html img tag it fixes this issue. Also, reported here on Stack Overflow

Can anyone point us in the right direction to further investigate this issue? Any help would be appreciated, and thank you for your time!

Other relevant packages to note:

• Node ^14.14.20
• React ^17.0.1

[setoKaibalol]

Adding unoptimized fixed this for me

[pcjmfranken]

Did you add your image host domain to the config as it says in the docs¹?

Footnotes

1. https://nextjs.org/docs/api-reference/next/image#domains ↩

[CarlosRangel17]

@pcjmfranken Thank you for reaching out, and that is a great callout.

Yes, I've already had the host domain configured as per the Next.js documentation (please see snippet below)

const { securityHeaders } = require('./next-security-headers')

module.exports = {
  images: {
    deviceSizes: [320, 420, 768, 991, 1024, 1200, 1500],
    domains: ['i1.adis.ws'],
    path: '/_next/image'
  },
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: securityHeaders
      }
    ]
  }
}

[pcjmfranken]

Does the Next server log say anything about these failed requests?