Gatsbyイメージとギャツビーを使用する導入.JS 2 V 2

この記事は、当初は2007年に出版されましたcodebushi.com
ビデオチュートリアルのために、チェックアウト

Gatsby.js V2 最近起動され、いくつかの小さな変更されている方法Gatsby Image が実装されている.Gatsbyイメージは簡単にあなたのウェブサイト上のすべての画像を最適化することができます反応成分です.それはあなたのための画像をリサイズするので、モバイルデバイス上で巨大なイメージをロードしないでください、そしてまた、あなたの最初のページの負荷が速く燃えているようにクールな“ぼやけ”効果を使用して画像を怠惰にロードされます.あなたがギャツビーに新しいならば、私は彼らのofficial tutorial まず最初に、どのようにギャツビーが動作するかに精通しています.
あなたの静的なウェブサイトへのGatsbyイメージを加えることは少しトリッキーでありえます.以下に必要な手順の内訳を示します.
NPMパッケージをインストールして設定しますgatsby-config.js 設定.
2 ) Graphqlを使用して画像を問い合わせるテスト.
3)必要な画像タイプを選択したり、固定したり、流体を選択したり、ページに問い合わせを追加したりします.
4 ) Gatsbyイメージを使う<Img> あなたのページのタグ.
以下は最終製品のデモです.

ギャツビーイメージデモ

Gatsbyイメージのインストールと設定

をインストールして起動しますdefault Gatsby Starter . Repoをクローン化したり、起動時にgatsby CLIを使用したりできます.

gatsby new image-demo https://github.com/gatsbyjs/gatsby-starter-default
cd image-demo/

CLIを使うならば、あなたは続けなければなりませんyarn 初期のパッケージがインストールされていたのでyarn そして、糸があります.ロックファイル.あなたがレポをクローン化して、使われるならばnpm install , その後、使用を続けてnpm それで、パッケージインストーラをミックスしないでください.私は使用するyarn このデモの残りのために.
Gatsbyイメージをインストールします

yarn add gatsby-image

他にも3つのパッケージが必要です.gatsby-transformer-sharp , gatsby-plugin-sharp , and gatsby-source-filesystem . デフォルトのスターターを使用していない場合は、これらのパッケージをインストールしてください.

yarn add gatsby-transformer-sharp gatsby-plugin-sharp gatsby-source-filesystem

The gatsby-source-filesystem パッケージによって、Gatsbyが特定のディレクトリのイメージの上でGraphqlを使用して、それらから質問をすることができます.二つsharp プラグインは、表示する前に画像を処理するものです.
あなたのgatsby-config.js また、プラグインを追加します.既存のプラグインの直前に追加します.ファイルは次のようになります.

module.exports = {
  siteMetadata: {
    title: 'Gatsby Default Starter',
  },
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/images`,
        name: 'images',
      },
    },
    'gatsby-transformer-sharp',
    'gatsby-plugin-sharp',
    'gatsby-plugin-react-helmet',
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: 'gatsby-starter-default',
        short_name: 'starter',
        start_url: '/',
        background_color: '#663399',
        theme_color: '#663399',
        display: 'minimal-ui',
        icon: 'src/images/gatsby-icon.png', // This path is relative to the root of the site.
      },
    },
    'gatsby-plugin-offline',
  ],
}

重要:正しい値を指定してくださいpath あなたのイメージに!The gatsby-source-filesystem あなたのイメージにアクセスするには、このフォルダに表示されます.我々はデフォルトのスターターを使用しているので、すでに/src/images それで、我々はそれを使います.いくつかの画像を取得Unsplash そしてそのフォルダに追加します.

グラフクエリによる画像クエリのテスト

プラグインがインストールされているので、devモードでサイトを起動できます.

gatsby develop

移動するhttp://localhost:8000/ あなたのサイトをdevモードで見るにはここで、画像クエリの動作方法を理解するために、GraphSQLインターフェイスと一緒にプレイします.ヘッドトゥhttp://localhost:8000/___graphql サイトのGraphqlビューを参照してください.ここでは、異なるクエリをテストすることができます.私は、3つのイメージを私のものに加えました/src/images フォルダと名前one.jpg two.jpg and three.jpg . 問い合わせるone.jpg これを使います.

query {
  imageOne: file(relativePath: {eq: "one.jpg"}) {
    childImageSharp {
      fluid(maxWidth: 1000) {
        base64
        tracedSVG
        aspectRatio
        src
        srcSet
        srcWebp
        srcSetWebp
        sizes
        originalImg
        originalName
      }
    }
  }
}

再生ボタンを押すと、応答列にデータが表示されます.これは、ギャツビーがあなたのイメージを見つけて、それを処理することができることを証明します.

変えてみるfile(relativePath: {eq: "one.jpg"}) そのフォルダ内の他の画像には、データの戻り値を確認してください.

グラフクエリの追加

このクエリをコピーし、ホームページコンポーネントで使用できます.開くsrc/pages/index.js . インポートする必要がありますgraphql から'gatsby' だけでなくImg から'gatsby-image' . クエリをページに追加します.最終結果は次のようになります.

import React from 'react'
import { Link, graphql } from 'gatsby'
import Img from 'gatsby-image'

import Layout from '../components/layout'

const IndexPage = (props) => (
  <Layout>
    <h1>Hi people</h1>
    <p>Welcome to your new Gatsby site.</p>
    <p>Now go build something great.</p>
    <Link to="/page-2/">Go to page 2</Link>
  </Layout>
)

export default IndexPage

export const pageQuery = graphql`
  query {
    imageOne: file(relativePath: { eq: "one.jpg" }) {
      childImageSharp {
        fluid(maxWidth: 1000) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`

クエリは以前より少し違ったように見えますfluid(maxWidth: 1000) {} 使用...GatsbyImageSharpFluid , これは“クエリフラグメント”です.いくつかの制限のため、我々は...GatsbyImageSharpFluid Graphqlの前に、ここで追加できます.あなたは別のフラグメントについての詳細を読むことができますGatsby Image Readme .
重要:通知方法file(relativePath: { eq: "one.jpg" }) 部分は同じままです、これはrelativePath はindex.js しかし、むしろ以前に指定したフォルダgatsby-config.js とgatsby-source-filesystem . 何も変更する必要はありませんrelativePath .
Gatsbyイメージには、2種類の応答画像があります.fixed and fluid . この区別は、クエリがどのように見えるかによって異なります.エーfixed クエリの幅と高さを設定し、別の画面解像度をサポートしています.エーfluid クエリは、最大幅と時には最大の高さを持ち、別の画面サイズをサポートするための複数の画像を作成します.ほとんどの場合、私自身はfluid 私のイメージは、画面のサイズに応じて異なりますので、タイプ.あなたが使いたいならばfixed タイプまたは2つの詳細については、チェックアウトReadme .

Gatsbyイメージコンポーネントの使用

それで、我々はページの上で我々の質問をします、GraphSQLデータは以下を通してアクセスされることができますprops 我々の中でIndexPage コンポーネント.データへのフルパスはprops.data.imageOne.childImageSharp.fluid . 私たちは、これを<Img> 以下のようなコンポーネント:

<Img fluid={props.data.imageOne.childImageSharp.fluid} />

あなたが好きであるけれども、あなたは明快さのために完全な経路を使っています.イメージはあなたのdevサイトに表示されます!すべての3つの画像を取得するにはimageOne ブロックと名前imageTwo and imageThree . あなたが望むものは何でもこれらを呼び出すことができます<Img /> コンポーネント.

query {
  imageOne: file(relativePath: { eq: "one.jpg" }) {
    childImageSharp {
      fluid(maxWidth: 1000) {
        ...GatsbyImageSharpFluid
      }
    }
  }
  imageTwo: file(relativePath: { eq: "two.jpg" }) {
    childImageSharp {
      fluid(maxWidth: 1000) {
        ...GatsbyImageSharpFluid
      }
    }
  }
  imageThree: file(relativePath: { eq: "three.jpg" }) {
    childImageSharp {
      fluid(maxWidth: 1000) {
        ...GatsbyImageSharpFluid
      }
    }
  }
}

コンポーネントは次のようになります.

<Img fluid={props.data.imageOne.childImageSharp.fluid} />
<Img fluid={props.data.imageTwo.childImageSharp.fluid} />
<Img fluid={props.data.imageThree.childImageSharp.fluid} />

我々は、そのクエリ内の同じものの多くを繰り返している、それはカスタムフラグメントを作ることによってクリーンアップすることができます.抜けるchildImageSharp ブロックを作成し、新しいフラグメントを作成します.

export const fluidImage = graphql`
fragment fluidImage on File {
  childImageSharp {
    fluid(maxWidth: 1000) {
      ...GatsbyImageSharpFluid
    }
  }
}
`;

このような新しいフラグメントを繰り返すことができます.

export const pageQuery = graphql`
  query {
    imageOne: file(relativePath: { eq: "one.jpg" }) {
      ...fluidImage
    }
    imageTwo: file(relativePath: { eq: "two.jpg" }) {
      ...fluidImage
    }
    imageThree: file(relativePath: { eq: "three.jpg" }) {
      ...fluidImage
    }
  }
`

我々は、現在我々のホームページで3つのイメージをすべて持ちます!あなたは別のローディング効果の別のギャツビーの断片で遊ぶことができます....GatsbyImageSharpFluid は、“ぼやけ”効果を与える、試してみてください...GatsbyImageSharpFluid_tracedSVG 固定画像と異なる効果と実験.

ギャツビーイメージデモ