Remote images not loading on deployment

Help
1

Current versus Expected behaviour
When deploying to Vercel, images from https://cdn.worldota.net are not loading.

I get the error 502: BAD_GATEWAY Code: OPTIMIZED_EXTERNAL_IMAGE_REQUEST_UNAUTHORIZED.

They work perfectly when rendered locally. The images only render on deployment if I add the unoptimized prop directly to the Image component, which I want to avoid.

Code, configuration, and steps that reproduce this issue
Here is an example of an image I am trying to load:
https://cdn.worldota.net/t/1024x768/content/af/b6/afb62f797ad6db34206ce3851132b93a5104b50b.jpeg

My current configuration:

// next.config.js
module.exports = {
  images: {
    remotePatterns: [
      { protocol: 'https', hostname: 'cdn.worldota.net' },
    ],
  },
};

Steps to reproduce:

  1. Add an image using the Next.js <Image /> component with the URL mentioned above.
  2. Deploy the app to Vercel.
  3. Observe that the image fails to load unless the unoptimized prop is added.

Configuration

Next.js 14.2.5
Page Router

Am I missing something?

2

Hi @markcnunes1, welcome to the Vercel Community!

I was able to use this image like this

            <Image
              src={
                "https://cdn.worldota.net/t/1024x768/content/af/b6/afb62f797ad6db34206ce3851132b93a5104b50b.jpeg"
              }
              fill
              alt="a picture of the developer of this page"
            />

It is live on https://anshuman-can-ship.vercel.app (App Router) and https://anshuman-can-ship.vercel.app/test (Pages Router).

I’m using Next.js 14.2.2 Pages Router.

If you need more help, please share your public repo or a minimal reproducible example. That will let us all work together from the same code to figure out what’s going wrong.

3

Hi @anshumanb , thanks a lot for the quick reply!

Your example isn’t loading the image for me on Chrome. Please see the image below:

image
image1821Ă—523 66.8 KB

However, I can preview it when opening the image on a new tab.

image
image812Ă—536 66.1 KB

This issue only occurs in Chrome (Version 131.0.6778.205). However, the image on your page renders correctly in Safari and Firefox. Is there any reason why it fails only in Chrome for me?

4

Hi @markcnunes1, the images seem to working for me on Google Chrome (131.0.6778.265).

Can you try updating your browser and see if the issue still persists?

5

Hi @anshumanb , I still have this issue after I updated Chrome to 131.0.6778.265.

It seems that I may be experiencing some cache issues. As a temporary solution, I have added the “unoptimized” prop to the images from cdn.worldota.net. I will wait for the cache to reset and remove the “unoptimized” prop later to check for any persistent issues.

Thank you for your assistance in investigating this!

1 Like