时间戳

首页 > 解决方案 > gatsby-image：在 childImageSharp 中看不到图片？

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

问题描述

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

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

但我可以看到我列出的所有图片：

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

别人可以我做错了吗？我很确定这是一个配置问题，但不确定可能是什么问题。谢谢！

标签： reactjsgraphqlgatsbygatsby-image

解决方案

我一开始是按照题名回答的。再次阅读您的问题后，我意识到我根本没有回答您的问题。

您的问题与 无关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

推荐阅读