Reputation: 41
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:
unoptimized: true
option in the next.config.mjs
, but then the image doesn't show upQuestions
I will be very thankful for any kind of help or approach towards this issue I'm facing...
Upvotes: 1
Views: 214