gatsby-image：childImageSharp 与 imageSharp 之间的区别

Question

我正在使用 gatsby-image 来自动处理不同的图像尺寸。效果很好。

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

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

Answer 1

好问题，Sharp 是一个了不起的工具，可以用任何 JavaScript 应用程序做很多事情。它也有自己的大量文档，我建议查看。http://sharp.dimens.io/en/stable/

首先，imageSharp 可以以多种方式使用，尤其是与变换一起使用。但这里有一个在 Gatsby 宇宙中使用 imageSharp 的简单示例。假设这是 folder 页面中的 index.js 并且有 home

的路线

import { Home } from 'routes/Home/Home'

/* eslint no-undef: "off" */
export const pageQuery = graphql`
  query HomeQuery {
    image1Image: imageSharp(id: { regex: "/image1.png/" }) {
      sizes(quality: 100) {
        ...GatsbyImageSharpSizes_withWebp
      }
    }
    image2Image: imageSharp(id: { regex: "/image2.png/" }) {
      sizes(quality: 100) {
        ...GatsbyImageSharpSizes_withWebp
      }
    }
    image3Image: imageSharp(id: { regex: "/image3.png/" }) {
      sizes(quality: 100) {
        ...GatsbyImageSharpSizes_withWebp
      }
    }
}
`
export default Home

然后 childImageSharp 你可以用它来定义整个应用程序的图像样式，例如你有一个名为 types 的文件夹，例如在这个文件中路径是 src/types/images.js您将定义图像的分辨率和大小以及关联的数据集。然后导出 childImageSharp，因为您计划在应用的不同部分一遍又一遍地重复使用子项。

// @flow

export type GatsbyImageResolutions = {
    resolutions: {
        base64?: string,
        height: number,
        src: string,
        srcSet: string,
        width: number,
    },
};

export type GatsbyImageSizes = {
    sizes: {
        aspectRatio: number,
        base64?: string,
        sizes: string,
        src: string,
        srcSet: string,
    },
};

export type Image = {
    childImageSharp: GatsbyImageResolutions | GatsbyImageSizes,
};

下面是一个展示图像转换能力的例子。此示例是通过 WordPress REST-api 返回的 ImageURL 到标准 href=link 到 link。好吧，使用 childIamgeSharp 调整图像大小并重新刷新aping！两者都存在于一个文件中 src/post/post.js

/**
     * Transform internal absolute link to relative.
     * 
     * @param {string} string The HTML to run link replacemnt on
     */
    linkReplace(string) {
        // console.log(string)
        const formatted = string.replace(
            /(href="https?:\/\/dev-your-image-api\.pantheonsite\.io\/)/g,
            `href="/`
        )

        return formatted
    }

    render() {
        const post = { ...this.props.data.wordpressPost }
        const headshot = { ...this.props.data.file.childImageSharp.resolutions }
        const { percentScrolled } = { ...this.state }
        const contentFormatted = this.linkReplace(post.content)

        return (
            <div ref={el => (this.post = el)}>
                <div className={styles.progressBarWrapper}>
                    <div
                        style={{ width: `${percentScrolled}%` }}
                        className={styles.progressBar}
                    />
                </div>

                <div className={styles.post}>
                    <h1
                        className={styles.title}
                        dangerouslySetInnerHTML={{ __html: post.title }}
                    />

                    <div
                        className={styles.content}
                        dangerouslySetInnerHTML={{ __html: contentFormatted }}
                    />

                    <Bio headshot={headshot} horizontal={true} />
                </div>
            </div>
        )
    }
}

Post.propTypes = {
    data: PropTypes.object.isRequired,
}

export default Post

export const postQuery = graphql`
    query currentPostQuery($id: String!) {
        wordpressPost(id: { eq: $id }) {
            wordpress_id
            title
            content
            slug
        }
        file(relativePath: { eq: "your-image-headshot.jpg" }) {
            childImageSharp {
                resolutions(width: 300, height: 300) {
                    ...GatsbyImageSharpResolutions
                }
            }
        }
    }

如果这对您有帮助，请告诉我，如果没有，我很乐意帮助您更详细地解释。因为夏普和盖茨比都是我非常热衷的学科，我在全职工作中几乎每天都和夏普打交道。

Answer 2

很抱歉延迟回复，也许您现在有了更好的理解，但我想我会在这里跟进。

回到 Gatsby 1.0，因为我回答这个问题时 2.0 还没有发布。但有几件事必须考虑在内 1 图片路径在哪里？ 2 是来自博客 post 或资产文件或 API?

的 MD 文件的图像

这是使用 gatsby-image 的组件的样子：（来自 Gatsby v1 文档）

import React from "react"
import Img from "gatsby-image"

export default ({ data }) => (
  <div>
    <h1>Hello gatsby-image</h1>
    <Img fixed={data.file.childImageSharp.fixed} />
  </div>
)

export const query = graphql`
  query {
    file(relativePath: { eq: "blog/avatars/kyle-mathews.jpeg" }) {
      childImageSharp {
        # Specify the image processing specifications right in the query.
        # Makes it trivial to update as your page's design changes.
        fixed(width: 125, height: 125) {
          ...GatsbyImageSharpFixed
        }
      }
    }
  }
`

Gatsby-image 直接使用 Sharp 库中的组件。正如您在上面看到的，gatsby-image 使用 childImageSharp 引用 GraphQL 查询，您可以在其中定义图像的文件路径、大小等。它将被视为 child，因为文件系统中的原始图像或 "origin" 图像在大小或文件类型上具有不同的构成。

在组件或布局中定义节点或图像的一般意义时可以使用 ImageSharp，因为没有直接调用图像的特定路径。

Answer 3

问这个问题已经有一段时间了，但我希望能直接回答“imageSharp 和 childImageSharp 之间有什么不同”的问题：

`imageSharp` 和 `childImageSharp`

之间的区别

它们始终是同一类型的节点，即ImageSharp。不同的是参考点。

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

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.Directly 得到 `ImageSharp`

也许您以某种方式知道 ImageSharp 节点的确切 id。您可以通过以下方式获取：

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

您还可以从 allFile 或 allImageSharp.

查询多张图片

这将 return 出现错误：

// error
{
  childImageSharp {
    id
  }
}

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

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

gatsby-image：childImageSharp 与 imageSharp 之间的区别

gatsby-image: difference between childImageSharp vs imageSharp

gatsby

imageSharp 和 childImageSharp

1。从文件节点

2.Directly 得到 ImageSharp

`imageSharp` 和 `childImageSharp`

2.Directly 得到 `ImageSharp`