問題タブ [gatsby-image]

Gatsby の Web サイトで作業を行っていますが、「TypeError: 未定義のプロパティ 'childImageFluid' を読み取れません」というメッセージが引き続き表示されます。

私が持っているコードは、これが Project.js ファイルにあります

そして、表示されるindex.jsファイルにgraphqlを設定しましたが、すべてがgraphqlで正常に機能しています...

Project.js ファイルで作業しているものまですべてが私の github - https://github.com/matthewbert86/gatsby-siteにありますが、そのコードはすべて上記の最初のコード セクションにあります。

一般的に灯台のスコアを改善する方法を知りたいと思っているこの質問につまずいた人のために、私はこのトピックに関する回答を別の質問に投稿し、多くの一般的なヒントを掲載しました.

私は PageSpeed インサイトを実行していますが、私の最大の問題は、約 8 ～ 10 秒の最大のコンテンツ ペイントです。以下に、私の最大のコンテンツペイント要素をリストします

この要素は、バックグラウンドで私のウェブサイト全体にまたがる画像です。...GatsbyImageSharpFluid_withWebp_noBase64これは元々、 1950 の maxWidth を使用してロードした 1.2 MB の pngでした。

これは、レンダリング方法のコードです

そして、これは静的graphqlクエリです

写真を表示するギャツビー サイトを構築しています。写真ごとに全画面表示のページが必要で、写真がページいっぱいに表示される必要がありますが、縦横比は尊重されます。

問題は、横向きで撮影された写真は正しく制限されますが、縦向きで撮影された写真は水平方向のスペースをすべて埋めますが、垂直方向のスペースをオーバーフローします。

ドキュメントには、ステートメントがあります

前述のように、fluid タイプを使用する画像は、コンテナーの幅と高さに合わせて引き伸ばされます。

ただし、私が観察した動作は、高さではなく幅に合わせて伸びるだけです。

問題を単純化して、400x400px コンテナーに画像を格納しようとする小さな例を示します。

横長の例では、画像は含まれる div の幅に制限されます。

縦向きの例では、画像が含まれている div の幅全体を埋めてしまい、高すぎます。

Gatsby Image を縮小して、使用可能な垂直スペースに制限するにはどうすればよいですか?

ps サンプル画像の丸みを帯びた角は、古いソリューションのブートストラップ クラスの残骸ですが、その存在は問題には影響しませんでした。

複数のテーマのチュートリアルで説明されている手順に従って、現在の gatsby インストールに 2 つ目のテーマをインストールしようとしました。新しいテーマのリソースのリンクに問題があります。これは node_modules 内にあるため、ここを参照する必要があると思います。現在、最初のテーマのメインの src ディレクトリを参照しようとしているようです。

ここで何が間違っているのか正確にはわかりません。これは、参照用の私の gatsby-config のコピー、特にプラグインセクションです。