作者:肥zi斌_343 | 来源:互联网 | 2022-12-18 17:42
我正在使用gatsby-image处理自动处理不同的图像大小.它很棒.
但是,在gatsby-image 的文档中,一个示例使用imageSharp
graphql来获取不同的图像大小,而另一个示例使用childImageSharp
.我很好奇两者之间有什么区别?
我认为它与任何一个gatsby-transformer-sharp
或者有关gatsby-plugin-sharp
,但这些插件的文档也没有任何信息.
1> Derek Nguyen..:
自问这个问题已经有一段时间了,但我希望直接回答“ 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
也许您以某种方式知道id
ImageSharp节点的确切信息。您可以通过以下方式获得它:
{
imageSharp (id: {eq: "2"}) { // not a real id
id
fluid {
src
}
}
}
您也可以从allFile
或查询多个图像allImageSharp
。
这将返回错误:
// error
{
childImageSharp {
id
}
}
其他插件也具有相同的关系。您还可以childMardownRemark
在File
类型上找到一个可以解析为MarkdownRemark
节点的节点。
它没有任何关系gatsby-image
-只是解析为同一节点的另一种方式。