3 replies

400 error on Next Image

NextJS

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

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}
                    />

                    <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/**",
            },
        ],
    },

    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?

TTC

Theo's Typesafe Cult•2mo ago•

3 replies

Icestonks

400 error on Next Image

NextJS

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

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}
                    />

                    <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/**",
            },
        ],
    },

    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?

400 error on Next Image

Similar Threads

400 error on Next Image

Similar Threads

Similar Threads

Similar Threads