💜

Gatsby の新しい画像プラグイン

2021/03/03に公開

Gatsby.js

tech

gatsby-plugin-image

今まで Gatsby で画像処理を行う際使用していた gatsby-image とは違い、新しい画像プラグインの gatsby-plugin-image には、静的画像用と動的画像用の2つの画像コンポーネントが用意されています。

StaticImage
コンポーネントやテンプレートを使用するたびに同じ画像になる、例としてはロゴ画像やサイトのメイン画像のような静的な画像の処理を行う際使用できるコンポーネントです。
GatsbyImage
CMSから送られてくるデータや、コンポーネントに渡された値が使用するたびに変化する動的な画像の処理を行う際使用できるコンポーネントです。

今回は、手軽に使用できるようになった StaticImageコンポーネント を使ってみました。

導入

npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-source-filesystem

/gatsby-config.js

module.exports = {
  plugins: [
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
  ],
}

今まで Gatsby で画像処理を行うにはgatsby-imageプラグインを使用し、静的な画像でも GraphQL を通して利用する事しかできませんでした。

import { graphql } from "gatsby"
import Img from "gatsby-image"

const Header = ({ data }) => {
  return (
    <header>
      <h1>Zenn</h1>
      <Img fixed={data.file.childImageSharp.fixed} />
    </header>
  )
}

export const query = graphql`
  query {
    file(relativePath: { eq: "zenn.png" }) {
      childImageSharp {
        fixed(width: 98, height: 23) {
          ...GatsbyImageSharpFixed
        }
      }
    }
  }
`
export default Header

StaticImage コンポーネント

gatsby-plugin-imageで導入された StaticImage コンポーネントを使用することでローカル画像、リモート上にある画像は GraphQL を通さず使用できるようになりました。

使い方は使用する画像をsrc/images/に置き、相対パスで記述するだけです。

src/components/Header.js

import { StaticImage } from "gatsby-plugin-image"

const Header = () => {
  return ( 
    <header>
      <h1>Zenn</h1>
      <StaticImage src="../images/zenn.png" alt="Zenn" />
    </header>
  )
}

export default Header;

サイズとレイアウト、遅延読み込み時に使用されるプレースホルダーのタイプなどを指定できます。

import { StaticImage } from "gatsby-plugin-image"

const Header = () => {
  return (
    <header>
      <h1>Zenn</h1>
      <StaticImage
        src="../images/zenn.png"
        alt="Zenn"
        placeholder="blurred"
        layout="fixed"
        width={98}
        height={23}
      />
    </header>
  );
};

export default Header;

リモート上にある画像も同じように表示することができます。

Grass-Graphという自身のGitHubの草をpng形式で出力してくれるサービスを利用した例です。

import { StaticImage } from "gatsby-plugin-image"

const GitHub = () => {
  return (
    <StaticImage
      src="https://grass-graph.moshimo.works/images/username.png"
      alt="GitHub"
      placeholder="blurred"
      layout="fullWidth"
    />
  );
};

export default GitHub;

　　　　　　　　　　　　　　　　　　　　　↓

StaticImage コンポーネント、今回は扱っていない GatsbyImage コンポーネントについては公式サイトにより詳しく記載されています。

参考

https://amzn.to/2UqDR3X

gatsby-plugin-image

導入

StaticImage コンポーネント

参考

Discussion