gatsby-image:childImageSharp与imageSharp之间的区别 [英] gatsby-image: difference between childImageSharp vs imageSharp

问题描述

我正在使用gatsby-image来自动处理不同大小的图像.效果很好.

但是，在gatsby-image的 docs 中，一个示例使用了在graphql中获得不同的图像大小，而另一个示例使用childImageSharp.我很好奇两者之间的区别是什么?

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

解决方案

问了这个问题已经有一段时间了，但是我希望直接回答"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节点可以在名称为childImageSharp的File节点上查询.

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

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

1.从文件"节点

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

也许您以某种方式知道ImageSharp节点的确切id.您可以通过以下方式获得它:

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

您还可以从allFile或allImageSharp查询多个图像.

这将返回错误:

// error
{
  childImageSharp {
    id
  }
}

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

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

I'm using gatsby-image to handle automatically handle different image sizes. It works great.

However, in the docs of gatsby-image, one example uses imageSharp in graphql to get different image sizes, while another example uses childImageSharp. I was curious what the difference between the two are?

I assume it has to do with either gatsby-transformer-sharp or gatsby-plugin-sharp, but the docs for those plugins don't have any info on that either.

解决方案

It's been a while since this question was asked, but I hope to give a direct answer to the question 'what's the different between imageSharp and childImageSharp':

Different between imageSharp & childImageSharp

They are always the same type of node, which is ImageSharp. The difference is the reference point.

In a typical gatsby blog, all files will be first processed with gatsby-transformer-file-system. Each file will get a node with information such as what type of file it is, then, a plugin like gatsby-transformer-sharp will pick up the node with the relevant type/extension, then process it further and create a new node:

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`

Whenever this happens, a parent-child relationship is created between the original File node and the ImageSharp node. The child ImageSharp node will be queriable on the File node with the name childImageSharp.

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

It means you can query the same ImageSharp node in at least 2 ways:

1. From the File node

ImageSharp node doesn't contain any info about its location in the file system, so if you want to get an image from folder src/X, you'd need to query it like:

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

2.Directly get the ImageSharp

Perhaps somehow you know the exact id of the ImageSharp node. You can get it by:

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

You can also query multiple images from allFile, or allImageSharp.

This will return with an error:

// error
{
  childImageSharp {
    id
  }
}

Other plugins share the same kind of relationship as well. You can also find a childMardownRemark node on the File type, that resolve to a MarkdownRemark node.

It doesn't have anything to do with gatsby-image -- it's just different way to resolve to the same node.

这篇关于gatsby-image:childImageSharp与imageSharp之间的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！