Gatsby 图像 : difference between childImageSharp vs imageSharp

Question

我正在使用 gatsby-image 来处理自动处理不同的图像大小。它工作得很好。

然而，在docs gatsby-image，一个例子使用 imageSharp在 graphql 中获取不同的图像大小，而另一个示例使用 childImageSharp .我很好奇这两者有什么区别？

我认为它与 gatsby-transformer-sharp 有关。或 gatsby-plugin-sharp ，但这些插件的文档也没有任何相关信息。

Answer 1

自从问这个问题已经有一段时间了，但我希望直接回答“imageSharp 和 childImageSharp 之间有什么不同”这个问题:
imageSharp之间的区别& childImageSharp
它们总是相同类型的节点，即 ImageSharp .区别在于引用点。

在典型的 gatsby 博客中，所有文件将首先使用 gatsby-transformer-file-system 进行处理。 .每个文件都会得到一个节点，其中包含文件类型等信息，然后是一个像 gatsby-transformer-sharp 这样的插件。将选择具有相关类型/扩展名的节点，然后进一步处理它并创建一个新节点:

File                                image.png

                                        |

                                   create a node with
gatsby-transformer-file-system ->  "type": "File",
                                   "extension": "png"

                                        |

                                   whenever see a node 
                                   with a valid image extension,
gatsby-transformer-sharp       ->  create a node with
                                   "type": "ImageSharp"
                                   that contains info of images
                                   processed by `gatsby-plugin-sharp`

每当发生这种情况时，就会在原始 File 之间创建父子关系。节点和 ImageSharp节点。 child ImageSharp节点将在 File 上可查询名称为 childImageSharp 的节点.

File                                ImageSharp
  |--id: 1                              |--id: 2
  |--children                           |--parent
  |     `--[ id: 2 ]                    |    `--id: 1
  `--childImageSharp                    |--fluid
        |--id: 2                       ...
        |--fluid
       ...

这意味着您可以查询相同的 ImageSharp节点至少有两种方式:

1.从文件节点
ImageSharp node 不包含有关其在文件系统中的位置的任何信息，因此如果您想从文件夹 src/X 中获取图像，你需要像这样查询:

query {
  // relativePath is relative to the folder set in `gatsby-transformer-file-system`
  file ( relativePath: { eq: "src/X"} ) {
    childImageSharp {
      id
      fluid {
        src
      }
    }
  }
}

2.直接获取 ImageSharp
也许不知何故你知道确切的 id ImageSharp 节点。您可以通过以下方式获取:

{
  imageSharp (id: {eq: "2"}) { // not a real id
    id
    fluid {
      src
    }
  }
}

您还可以从 allFile 查询多张图片, 或 allImageSharp .

这将返回一个错误:

// error
{
  childImageSharp {
    id
  }
}

其他插件也有同样的关系。您还可以找到 childMardownRemark File 上的节点类型，解析为 MarkdownRemark节点。

与 gatsby-image没有任何关系——这只是解析到同一个节点的不同方式。