問題タブ [nextjs-image]

こんにちは、次の js と tailwind css を使用するプロジェクトに取り組んでいます。この画像を中央に配置したいのですが、画像に示されているように、次の js は flex と justify-center を無視しているようです。

(例: justify-start、justify-end) に位置を動的に渡したい。どんな助けでも大歓迎です。

そして、これが私の画像コンポーネントです。

デフォルトの NextImage をエクスポート

Vercel にデプロイすると、このエラーが発生します

ビルド エラーが発生しました 14:34:33.017 エラー: 指定された images.domains は、無効な値 () を受け取った文字列の配列である必要があります。

画面にローカルで画像を表示するために、次の設定を行いました。

私のenv.localにこれを入れました

私は自分の画像を取得せずに呼び出します

ローカルで画像を表示できますが、アプリをローカルで実行すると、console.log にもこのエラーが表示されます。方法や理由はわかりません。私の画像は問題なくロードされるので。これが Vercel が機能しない理由かもしれませんが、この 2 つが関連しているかどうかはわかりません。

上記のすべての設定は、このビデオからほぼ正確にコピーして貼り付けたものです (10 ～ 16 分から見てください): youtube

これまでに試したこと: Vercel の環境変数に NEXT_PUBLIC_IMAGES_DOMAIN を追加し、Heroku バックエンドの名前を値として (NEXT_PUBLIC_STRAPI_URL で行ったのと同じように)、正常にデプロイされましたが、500 サーバー エラーが発生しました。しかし、それを修正する方法もわかりません。

すべてが一意のサイズを持つ画像で Next.js Image コンポーネントを使用しようとしています。彼らの例は、画像が親の div の幅と高さに引き伸ばされることを示しています。それらをラッピングしようとしましたが、動的な画像サイズに対応する方法がわかりません。それぞれの比率に合わせて幅と高さを設定したいと思います。ティア。

これが私のコードです（画像は配列から来ています）-高さを設定していないため、ページには何もレンダリングされません。Tailwind を使用h-autoしても表示されません。

これは私のユースケースです：

• ブログ記事に画像を追加します。
• これらの画像をレンダリングするために固定サイズを設定することはできません。それぞれに固有の比率がある可能性があるためです
• 400 x 400例: の正方形の画像または長方形の画像をアップロードする場合があります。400 x 200

出典: https://nextjs.org/docs/api-reference/next/image

画像をレンダリングするnext/imageには、要素に直接設定するか<Image/>、親に設定して、寸法を定義する必要があります。これは、画像の読み込み段階でのレイアウト シフトを防ぐため、優れています。

ただし、各画像には独自の寸法があるため、すべての画像に同じ寸法を使用できます。

これは私が必要とする結果です。

どうすればそれを達成できますか？

私の現在の考え：

画像をアップロードするときは、その寸法も保存する必要があります。を使い始める前はnext/image、単純に画像を保存していましたsrc。次に、次のようなものを保存する必要があります。

したがって、次のようにレンダリングできます。

これはどのように行われるべきですか？これに対するより簡単な解決策はありますか？

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

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

制作時、画像が見られる

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