Next.js Discord

Discord Forum

Image return 400

Unanswered
Silver Marten posted this in #help-forum
Open in Discord
Silver MartenOP
When viewing in production, I for some reason can't see the discord avatar. Does anyone know why? I'm on the latest next version

This is the url that's trying to be fetched, but returning 400:
https://mydomain/_next/image?url=https%3A%2F%2Fcdn.discordapp.com%2Favatars%2F877175604431171644%2F29d437a3b7b84e4478c2f9899a45e8df.png&w=256&q=80


This is the image component:
                    <Image
                        alt="avatar"
                        className="relative bottom-2 rounded-full border-[6px] border-background shadow-zinc-950 drop-shadow-xl sm:bottom-5"
                        src={getAvatarLink(user)}
                        quality={80}
                        width={135}
                        height={135}
                    />

It works on local, and local build - it also works in production if I put on the unoptimized flag.

Here's my next config for images:
    images: {
        qualities: [25, 50, 75, 80, 100],
        remotePatterns: [
            {
                protocol: "https",
                hostname: "cdn.discordapp.com",
                port: "",
                pathname: "/avatars/**",
            },
            {
                protocol: "https",
                hostname: "cdn.discordapp.com",
                port: "",
                pathname: "/embed/avatars/**",
            },
        ],
    },


Maybe I'm missing something?

5 Replies

@Silver Marten When viewing in production, I for some reason can't see the discord avatar. Does anyone know why? I'm on the latest next version This is the url that's trying to be fetched, but returning 400: https://mydomain/_next/image?url=https%3A%2F%2Fcdn.discordapp.com%2Favatars%2F877175604431171644%2F29d437a3b7b84e4478c2f9899a45e8df.png&w=256&q=80 This is the image component: ts <Image alt="avatar" className="relative bottom-2 rounded-full border-[6px] border-background shadow-zinc-950 drop-shadow-xl sm:bottom-5" src={getAvatarLink(user)} quality={80} width={135} height={135} /> It works on local, and local build - it also works in production if I put on the unoptimized flag. Here's my next config for images: ts images: { qualities: [25, 50, 75, 80, 100], remotePatterns: [ { protocol: "https", hostname: "cdn.discordapp.com", port: "", pathname: "/avatars/**", }, { protocol: "https", hostname: "cdn.discordapp.com", port: "", pathname: "/embed/avatars/**", }, ], }, Maybe I'm missing something?
B33fb0n3
I assume you are not hosting on your own server. Rather you hosting on a public provider like vercel or similar.

Discord (any many other services) block IP ranges of public hosting providers, to reduce spam. So you can't use their API nor their images (in this example) when using a public hosting provider.

You can do:
- switch everything to your own server
- create a proxy, so your app can stay on vercel and instead of requesting the image directly from discord, you proxy it to your server and your server requests the image: Vercel -> Proxy (your server) -> Discord
Idk, if that gives anymore information
Also, I don't see how it would be because of discord blocking our IP, as using the unoptimized flag, then wouldn't change anything
Silver MartenOP
Found out the problem - the config file was not being copied over. Weird it can run without one.