SirArman
SirArman

Reputation: 41

upstream image response failed for..., "url" parameter is valid but upstream response is invalid - NextJS ImageError

I will be very thankful for any thoughts or ideas about this problem!

In my Next.js 14 project, I'm building a chatting application using Getstream (SDK/API). I'm working on a component to display group chat descriptions, including an avatar image retrieved from the channel.data object provided by Getstream.

Here’s how I retrieve and render the image:

const { channel } = useChannelStateContext();
const channelImage = channel.data?.image as string | undefined;

// image gets passed through multiple components

<Image
  src={channelImage}
  alt="Channel Avatar"
  width={40}
  height={40}
  className="object-cover"
/>

Consider that I also updated my next.config.mjs to include this as a remote pattern:

images: {
  remotePatterns: [
    {
      protocol: "https",
      hostname: "dublin.stream-io-cdn.com",
    },
    {
      protocol: "https",
      hostname: "img.clerk.com",
    },
  ],
},

Now, as a result, the image actually shows up with no problems on my localhost window. I might've thought that there's no issues, except of the fact that my console in VsCode is complaining:

upstream image response failed for https://dublin.stream-io-cdn.com/... 403
ImageError: "url" parameter is valid but upstream response is invalid
at fetchExternalImage (...)
at async DevServer.imageOptimizer (...)
at async cacheEntry.imageResponseCache.get.incrementalCache (...)
at async (...)
{
  statusCode: 403
}

Here' some of the versions that I'm using:

"next": "14.2.5",
"stream-chat": "^8.37.0",
"stream-chat-react": "^11.23.3",
"typescript": "^5"

I'm concerned about this error potentially causing issues in production or being indicative of some misconfiguration.

Things I've already tried:

Questions

I will be very thankful for any kind of help or approach towards this issue I'm facing...

Upvotes: 1

Views: 214

Answers (0)

Related Questions