next/image with priority -> preload without crossorigin="anonymous"

What version of Next.js are you using?

10.2.0

What version of Node.js are you using?

14.16.0

What browser are you using?

Chrome

What operating system are you using?

Windows

How are you deploying your application?

Other platform

Describe the Bug

Setting priority on the next/image component, the image will be preloaded without crossorigin=“anonymous” and not correctly preloaded:

<link rel="preload" as="image" href="https://external/image.jpg">

This is the warning reported: The resource https://external/image.jpg was preloaded using link preload but not used within a few seconds from the window’s load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

Expected Behavior

<link rel="preload" as="image" href="image.jpg" crossorigin="anonymous">

To Reproduce

<Image
      loader={myLoader}
      src="/me.png"
      alt="Picture of the author"
      width={500}
      height={500}
      priority
    />

[PudparK]

My image is also rendering pixelated. Then seconds later I get the error below. I do notice that it fixes the image if I extend the viewport back and forth.

The resource http://localhost:3000/_next/image?url=imageUrlHere was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.

[georgekrax]

@PudparK Same issue!