gatsby-image:childImageSharp与imageSharp之间的差异

Question

我正在使用gatsby-image处理自动处理不同的图像大小.它很棒.

但是,在gatsby-image 的文档中,一个示例使用imageSharpgraphql来获取不同的图像大小,而另一个示例使用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节点之间创建父子关系。子ImageSharp节点将File在名称为的节点上可查询childImageSharp。

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

这意味着您可以ImageSharp通过至少两种方式查询同一节点：

1.从“文件”节点

ImageSharp节点不包含有关其在文件系统中位置的任何信息，因此，如果要从folder获取图像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

也许您以某种方式知道idImageSharp节点的确切信息。您可以通过以下方式获得它：

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

您也可以从allFile或查询多个图像allImageSharp。

这将返回错误：

// error
{
  childImageSharp {
    id
  }
}

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

它没有任何关系gatsby-image-只是解析为同一节点的另一种方式。