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，因此请确保在查询中使用正确的片段：https://www.gatsbyjs.org/packages/gatsby-image/#fluid-queries

Answer 2

一般来说，问题中的两个查询都按预期运行；没有配置问题。

第一个查询始终旨在仅返回一个结果。您可以provide parameters控制获得的结果。您可以在盖茨比（Graphs）网站的GraphQL模式中查看有关可用参数的更多信息。