gatsby-image：在 childImageSharp 中看不到图片？

Question

这可能是一个基本问题，但仍然无法确定为什么我在此示例 graphql 查询中只能看到一个文件的概念：

query {
  file {
    childImageSharp {
      id
      fluid {
        src
      }
    }
  }
}

但我可以看到我的所有图片都列在这个列表中：

query MyQuery {
  allFile {
    nodes {
      childImageSharp {
        id
      }
    }
  }
}

其他人可以做错我的事吗？我很确定这是一个配置问题，但不确定是什么问题。谢谢！

Answer 1

我一开始是按照题名回答的。又看了你的问题，才发现我根本没有回答你的问题。

您的问题与 childImageSharp 无关，与您使用的查询有关。

• file 查询将只要求一个结果。
• allFile 查询将默认询问所有结果（您可以在其上添加过滤器）。

我建议多学习一些 graphql，https://www.howtographql.com/ 很流行。

这是我原来的回答

您可以尝试这样的操作来查看所有分辨率：

query {
    file(relativePath: { eq: "logo.jpg" }) {
      childImageSharp {
        fluid(maxWidth: 800) {
          srcSet
        }
      }
    }
  }

你会得到类似的东西：

{
  "data": {
    "file": {
      "childImageSharp": {
        "fluid": {
          "srcSet": "/static/320cb30c50318c089773e0770b96b2a2/d278e/logo.jpg 200w,\n/static/320cb30c50318c089773e0770b96b2a2/8539d/logo.jpg 400w,\n/static/320cb30c50318c089773e0770b96b2a2/bc3a8/logo.jpg 800w,\n/static/320cb30c50318c089773e0770b96b2a2/81ef8/logo.jpg 1200w,\n/static/320cb30c50318c089773e0770b96b2a2/989b1/logo.jpg 1600w,\n/static/320cb30c50318c089773e0770b96b2a2/96775/logo.jpg 9094w"
        }
      }
    }
  }
}

但是在gatsby中我们通常使用gatsby-image，所以一定要在查询中使用正确的Fragments：https://www.gatsbyjs.org/packages/gatsby-image/#fluid-queries

Answer 2

笼统地回答——你问题中的两个查询都按预期工作；没有配置问题。

第一个查询总是打算return只有一个结果。您可以 provide parameters 来控制您得到的结果。您可以在 Gatsby 站点的 GraphQL 架构中查看有关可用参数的更多信息。