next.js: Next13 tag not loading external urls in development with app

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.6.0: Mon Aug 22 20:20:07 PDT 2022; root:xnu-8020.140.49~2/RELEASE_ARM64_T8110
Binaries:
  Node: 16.17.0
  npm: 8.15.0
  Yarn: 1.22.10
  pnpm: N/A
Relevant packages:
  next: 13.0.0
  eslint-config-next: 13.0.0
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

When in development mode. Next <Image> tags from external URL does not load. The HTML tag makes it on the page and takes up the appropriate space, but it does not show a broken image. The image simply does not display as you can see in this screenshot. The second image loads, but that’s because I added the unoptimized property, which sort of defeats the whole point of the tag.

However, in production it works fine. Relevant code:

import Image from "next/image";
import styles from "./page.module.css";

export default function Home() {
  return (
    <div className={styles.container}>
      <main className={styles.main}>
        <Image
          src="https://images.unsplash.com/photo-1666782199657-09885cc1c088"
          alt="test"
          width={500}
          height={500}
        />
        <div className="">This image does not work</div>
        <Image
          src="https://images.unsplash.com/photo-1666782199657-09885cc1c088"
          alt="test"
          width={500}
          height={500}
          priority
          unoptimized
        />
        <div className="">
          This image works, but only because of unoptimized
        </div>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{" "}
          <span className={styles.logo}>
            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          </span>
        </a>
      </footer>
    </div>
  );
}

Expected Behavior

Image should load

Link to reproduction

https://github.com/williamlmao/next-broken-image-demo

To Reproduce

https://github.com/williamlmao/next-broken-image-demo

Clone the repo, then npm run dev. Look at the root page.