Wen using the normal <img> component, like this:

import Image from "next/image";

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center space-y-4 p-24">
      <h1 className="text-4xl text-white">discord avatar generator</h1>
      <img
        className="h-48 w-48 rounded-xl"
        src={"/discord/avatar/1104076205105365064"}
        width={512}
        height={512}
        alt="discord avatar"
      />
    </main>
  );
}

it works as expected, see screenshot

but when using the NextJS <Image> component, it doesn't work, see screenshot, and gives the following error:

 ⨯ upstream image response failed for /discord/avatar/1104076205105365064 DOMException [AbortError]: The operation was aborted.
    at new DOMException (node:internal/per_context/domexception:53:5)
    at Fetch.abort (node:internal/deps/undici/undici:10703:19)
    at requestObject.signal.addEventListener.once (node:internal/deps/undici/undici:10737:22)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:778:20)
    at EventTarget.dispatchEvent (node:internal/event_target:713:26)
    at abortSignal (node:internal/abort_controller:369:10)
    at AbortController.abort (node:internal/abort_controller:391:5)
    at EventTarget.abort (node:internal/deps/undici/undici:7269:21)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:778:20)
    at EventTarget.dispatchEvent (node:internal/event_target:713:26)
    at abortSignal (node:internal/abort_controller:369:10)
    at AbortController.abort (message too long)