画像はGatsby.js

Question

のために私はこれで苦労してきた：私のindex.mdファイルと同じフォルダ内の私のイメージと

--- 
path: '/path-to/' 
title: 'Title of Post' 
indexImage: './img.jpg' 
--- 

：

私の前の問題は次のようになります。

<img src={ post.frontmatter.indexImage }></img> 

前の問題に記載されているソースに引き上げるこの思考：私のtemplates/post.jsファイルで

は、私は次の行を持っています。マイpost.jsクエリは次のようになります。これが動作しない理由について

GraphQL Error Field "indexImage" of type "File" must have a selection of subfields. Did you mean "indexImage { ... }"? 

任意の考え：

以下

export const postQuery = graphql` 
    query BlogPostByPath($path: String!) { 
    markdownRemark(frontmatter: { path: { eq: $path } }) { 
     html 
     frontmatter { 
     path 
     title 
     indexImage 
     } 
    } 
    } 
`; 

はエラーメッセージのですか？私はギャツビーにはまだ新しいので、それは私の頭の上にある問題かもしれません。前もって感謝します。

Answer 1

.cacheフォルダを削除してビルドキャッシュを無効にします。

Answer 2

must have a selection of subfields. Did you mean "indexImage { ... }

エラーの重要な部分です。

「サブフィールド」とフィールド（indexImageなど）が{ ... }と表示されるときは、これは「スカラー」（文字列、数値、浮動小数点など）タイプではなく「オブジェクト」タイプであることを意味します。

だからあなたのクエリは次のようになります。画像処理を使用する方法

query BlogPostByPath($path: String!) { 
    markdownRemark(frontmatter: { path: { eq: $path } }) { 
    html 
    frontmatter { 
     path 
     title 
     indexImage { 
     childImageSharp { 
      resolutions(width: 400) { 
      width 
      height 
      src 
      srcSet 
      } 
     } 
     } 
    } 
    } 
} 

この例でサイト文書をhttps://image-processing.gatsbyjs.org/