Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Next13 <Image> tag not loading external urls in development with app

See original GitHub issue

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>
  );
}