はじめに

Next.jsのImageコンポーネントで画像が表示されない
事態が起こってしまったので、調べてみた。

本題

• 表示される例

ローカルに画像ファイルを持っている場合

const imagePath = "./image.png"

<Image
  src={imagePath}
  width={100}
  height={80}
  alt={"画像"}
/>

• 表示されない例

外部サーバに画像ファイルがある場合

const imagePath = "https://example.com/img/image.png"

<Image
  src={imagePath}
  width={100}
  height={80}
  alt={"画像"}
/>

解決方法

next.config.jsに以下を追記。

module.exports = {
  images: {
    domains: ["example.com"] // 画像ファイルがあるドメインを指定
  },
};