web-dev-qa-db-ja.com

gatsby-image：childImageSharpとimageSharpの違い

私はgatsby-imageを使用して、さまざまな画像サイズを自動的に処理しています。それは素晴らしい働きをします。

ただし、gatsby-imageの docs では、graphqlでimageSharpを使用してさまざまな画像サイズを取得する例と、childImageSharpを使用する例があります。 2つの違いは何ですか？

どちらかと関係があると思いますgatsby-transformer-sharpまたはgatsby-plugin-sharp、しかしそれらのプラグインのドキュメントにはそれに関する情報もありません。

gatsby
13
Brandon

この質問が出されて久しぶりですが、「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ノードを少なくとも2つの方法でクエリできます。

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
  }
}

他のプラグインも同じ種類の関係を共有します。 childMardownRemarkノードで解決されるFileタイプでMarkdownRemarkノードを見つけることもできます。

gatsby-imageとは何の関係もありません-同じノードに解決するための異なる方法です。

11
Derek Nguyen

すばらしい質問です。Sharpは素晴らしいツールであり、どのJavaScriptアプリケーションでも非常に多くのことができます。それはまた、私が調べてみることを提案した広範なドキュメントも持っています。 http://sharp.dimens.io/en/stable/

最初のimageSharpは、特にTransformでさまざまな方法で使用できます。しかし、これはギャツビーの世界でimageSharpを利用する簡単な例です。これがindex.jsページfolderにあり、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から標準のhref = linkへのリンクを介してImageURLで返されます。childIamgeSharpを使用して画像のサイズ変更と再形成を行います！両方が1つのファイルに存在します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
                }
            }
        }
    }

これがあなたに役立つかどうか私に知らせてください、そうでなければ私はより詳細に説明するのを助けてくれるでしょう。 SharpとGatsbyは両方とも対象なので、私は非常に情熱的で、フルタイムの仕事でほぼ毎日Sharpに対応しています。

4
Nick C

返信が遅れて申し訳ありません。理解が深まったと思いますが、こちらでフォローアップすると思います。

私がこの質問に答えたときのようにギャツビー1.0をもう一度参照すると、2.0はまだリリースされていません。しかし、アカウント1にはいくつかの点を考慮する必要があります。イメージパスはどこにあるのでしょうか。 2つ目は、ブログ投稿のMDファイル、アセットファイル、またはAPIの画像ですか？

これは、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は、画像のファイルパス、サイズなどを定義するGraphQLクエリを参照するchildImageSharpを使用します。ファイルシステムの元の画像または「元の」画像は、サイズやファイルタイプが異なるため、子供と見なされます。

イメージの特定のパスが直接呼び出されないため、コンポーネントまたはレイアウトでノードまたはイメージの一般的な感覚を定義するときにImageSharpを使用できます。

1
Nick C