next.js - Next.Js イメージ コンポーネントがローカルホストにイメージをロードしない

Question

画像ドメインをセットアップしましたnext.config.jsが、ローカルホストに画像が表示されません。ただし、コードが本番環境にプッシュされると、イメージが vercel にロードされます。

localhost では、次の図が表示されます。画像が読み込まれません。

制作時、画像が見られる

開発中の画像を見るにはどうしたらいいですか？

module.exports = {
    images: {
        domains: [ 'd31wtm2rx76rut.cloudfront.net'],
    },
}

<NextImage
    src=https://d31wtm2rx76rut.cloudfront.net/1604303981874
    alt="Khanna"
    layout="fill" />

Answer 1

1. 古い nextjs バージョンについてはわかりませんが、現在 nextjs の画像コンポーネントは次のようになっています。

   import Image from 'next/image'

   <Image
   src="https://d31wtm2rx76rut.cloudfront.net/1604303981874"
   alt="Khanna"
   layout="fill" />
   

エクスポートは正しいです。それがうまくいくことを願っています:)

ただし、イメージ コンポーネントにunoptimized={true} props を追加することで簡単に修正できます (プロダクション ビルドにはお勧めしません)。

詳細については、こちらを確認してくださいNextjs Image Doc