gatsby-image が非推奨になり gatsby-plugin-image に推奨されていたので使い方を解説してみた

「The gatsby-image package is now deprecated. （gatsby-imageパッケージは、現在、非推奨となっています。）」

とのことだったので推奨されていた gatsby-plugin-image を使うことにしました。
使い勝手が少し異なりましたが以前よりも便利になりました。

成果物と概要

読み込み時をblurupさせてボヤッと出現する画像表示です。

上の画像のように各画像のサイズを簡単に用意してくれます。

gatsby-plugin-imageプラグインは、StaticImageとGatsbyImageの２つのコンポーネントを使います。

StaticImageは相対パスですぐに最適化した画像を引っ張ってこれるため使い勝手が良いです。GraphQLを使わずに済みます。

GatsbyImageはGraphQLから引っ張ってきたものを使います。こちらの方がgatsby-imageの頃の使い方に近いかと思います。

使い分けとしては画像枚数が多いことやGraphQLを引っ張るまでもない時はStaticImageを使うと良いかなと思います（もう少し良い選定方法があれば知りたいです。）

準備

インストール

まずはプロジェクトを作成。

gatsby new GatsbyPluginTest https://github.com/gatsbyjs/gatsby-starter-hello-world

※gatsby-cliが入っていない人は別途インストール

関連プラグインもインストール。

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

画像

o-danでフリー素材画像を任意の名前で保存します。

gatsby-config.jsの設定

gatsby-config.js

module.exports = {
  plugins: [
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images/`,
      },
    },
  ],
}

srcディレクトリ構造

src
  images
    shiva.jpeg（任意の画像）
  pages
    index.js

StaticImageを使うやり方

StaticImageは相対パスを指定してあげるだけなのでかなり楽です。

index.js

import React from "react";
import { StaticImage } from "gatsby-plugin-image";

const Home = () => {
  return (
    <div>
      <h1>Hello world!</h1>
      <StaticImage
        src="../images/shiva.jpeg" // 相対パス
        width={600}
        alt="Shiva"
        placeholder="blurred" // ボヤッと読み込ませるオプション。他にもいくつかある
        quality="40" // 画質
      />
    </div>
  );
}

export default Home;

特に説明は不要かなと思います。

GatsbyImageを使うやり方

GraphQLを使います。また、ライブラリから GatsbyImage だけでなく getImageメソッド も引っ張ってきます。 getImageメソッド は GatsbyImageコンポーネント の src属性image属性 に使います。

index.js

import React from "react";
import { GatsbyImage, getImage } from "gatsby-plugin-image";
import { graphql } from "gatsby";

const Home = ({ data }) => { // graphqlでデータを引っ張ると data に 返り値 が返ってくる

  const GatsbyImages = data.allFile.edges.map(({node}) => {
    return <GatsbyImage image={getImage(node.childImageSharp)} alt={node.name} key={node.name} />
  })

  return (
    <div>
      <h1>Hello world!</h1>
　　　　　　　　　　　{GatsbyImages}
    </div>
  );
}

export const query = graphql`
  query MyQuery {
    allFile {
      edges {
        node {
          name // altとkey属性用
          childImageSharp {
            gatsbyImageData(
              blurredOptions: {width: 100} // blurオプション。widthを小さくした方がblurっぽいかなと
              width: 600
              placeholder: BLURRED // blurup
            )
          }
        }
      }
    }
  }
`;

export default Home;

二つ並べてみた

左： GatsbyImage 右：StaticImage

特に意味はない