【Next.js】Imageコンポーネントで画像がエラーになった。

Next.jsの「Image」コンポーネントを使用してアバター画像を表示させようと思ったのですが、なぜかimgタグがエラーになってしまい表示されませんでした。

いろいろ調べたのですが解決策が見当たらず、試してなんとか表示されたのでその過程をメモしておきます。

Imageコンポーネントが上手くいかない…
表示されるはずの「localhost:3000/avatar.png」を開いても表示されない…

解決方法

画像ファイルの拡張子を変更したことで表示されるようになりました。(「.png」から「.jpeg」に変更)

※画像ファイルの場所は、エラー時も解消時も「public内(Next.jsプロジェクト直下)」に置いて特に変えていません。

変更前(エラー)

<Image
  src={"/avatar.png"}
  className="rounded-full"
  width={60}
  height={60}
  alt="Avatar"
/>

変更後(エラー解消)

<Image
  src={"/avatar.jpeg"}  // ←拡張子をjpegに変えた
  className="rounded-full"
  width={60}
  height={60}
  alt="Avatar"
/>
表示された…!!

エラーが起きた原因

原因を少し調べてみたのですが、よくわかりませんでした。

pngもサポートされているはずだし、ファイルサイズも特に問題なかったし…

詳しい方がいたらぜひ教えてください。。

コメントを残す

*