🙄

【Gatsby】Gatsbyで画像を表示してみる

2023/02/23に公開

Gatsby.js

React

tech

概要

以前、Reactで画像を表示するパターンをメモとして残したが、Gatsbyの案件に携わることがあり、通常？？の方法以外にもあったのでメモ。

通常の表示

通常なのか分かりませんが、そのまま表示する方法があるようなので。

importして画像を表示

まずは定番？のimportを利用して呼び出す。
Gatsbyの場合、プロジェクト作成時にsrcディレクトリの下にimagesディレクトリがあるようなので、そこに画像を入れて、下記のように呼び出す。

import imgGatsby from "../images/sample.jpg"

const imageDisp = () => {
  return (
    <>
    <img src={imgGatsby} />
    </>
  )
}

これまで通りなので特に説明もないのですが、TypeScriptを導入している場合は（.tsx）注意です。
画像をimportする際に、型エラーがでるようなのでsrc直下にtypesフォルダとかにimage.d.tsというファイルを作るといいみたいです。

src/types/imiage.d.ts

declare module "*.jpg"
declare module "*.png"
declare module "*.gif"

staticフォルダから画像を表示

プロジェクトのディレクトリ直下にstaticファルダを作成して、そこに表示したい画像を保存しておく。

staticディレクトリに画像ファイルを保存するとpublicディレクトリにあるstaticフォルダにコピーされる。

画像はstaticフォルダからのパスになるので下記のようになる。

const imageDisp = () => {
  return (
    <>
    <img src='/sample.jpg' />
    </>
  )
}

gatsby-plugin-imageによる画像を表示

Gatsbyには画像の最適化してくれるというgatsby-plugin-imageというプラグインがある模様。特にGatsbyの画像コンポーネントはデフォルトで遅延読み込みされるらしい。

ただこちらのgatsby-plugin-imageだけでなく下記もインストールするらしい。

gatsby-source-filesystem
gatsby-plugin-sharp
gatsby-transformer-sharp

これらをまとめて、インストールする。

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

gatsby-source-filesystemは静的な画像を扱う時、gatsby-transformer-sharpは動的な画像を扱う際に使うらしい。

インストールしたらプラグインをgatsby-config.jsに記載する必要があるので、pluginsのところに記載します。

gatsby-config.js

module.exports = {
  plugins: [
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`, // Needed for dynamic images
  ],
}

StaticImage

gatsby-plugin-imageには静的な画像を扱うためのタグといてStaticImageというのがある。
静的動画というのは、「トップページのキービジュアルの画像・ヘッダーやフッターなどで表示したい画像など。

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

<StaticImage src="../images/img_gatsby3.jpg" alt="gatsbyimage" />

使い方はStaticImageをインポートして、これまでの<img />タグと同じように使えばいい。
また、いくつかオプションがある。

<StaticImage src ="sample.jpg" quality ={90} placeholder="blurred" formats ={[" AUTO", "WEBP", "AVIF"]} />

qualityは画像のクオリティーを指定できる。
placeholderは遅延読み込みで画像が読み込まれる前の低解像度の画像を読み込み中に表示できる。blurredはぼんやり表示させる設定。
formatsは最適化される画像の形式で、JPEG、PNG、WebP、AVIF 形式に対応している。デフォルトではjpgとwebpに対応していて、webpに対応しているブラウザだとwebpが表示される。

他にもオプションはあるので以下の公式サイトより確認できる。

GatsbyImageによる画像を表示

StaticImageと違って、GatsbyImageは例えばブログの記事など動的に変わる場合に使う。
その場合、GraphQLを使用して画像を取得します。以下の手順に従って、GatsbyImageとGraphQLを使用して画像を取得することができます。

とりあえず、ディレクトリ直下のsrc配下のimagesフォルダ内の画像を表示する方法をメモ。

ディレクトリ直下のフォルダにアクセスできるように設定

ディレクトリ直下のsrc配下にアクセスするにはgatsby source file systemのプラグインが必要。そのプラグインをインストールした状態でgatsby-config.jsに下記の設定をすることで、src以下のファイルへのアクセスができる。

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/images/フォルダ内のすべてのファイルをGraphQLノードに変換するようにgatsby-source-filesystemプラグインを設定される。

利用するコンポーネントからGraphQLクエリの設定

今回、imageDispというページコンポーネントがあるという前提で。


import { GatsbyImage} from "gatsby-plugin-image"
import { graphql } from 'gatsby';

const imageDisp = ({data}) => {
  return (
    <>
    <GatsbyImage image={data.file.childImageSharp.gatsbyImageData} />
    </>
  )
}

export const query = graphql`
query{
  file(relativePath: { eq: "sample.jpg" }) {
    childImageSharp {
      gatsbyImageData(200px)
    }
  }
}
`

まずはGatsbyImageとgraphqlを仕様するのでインポートする。
その後にGraphQLクエリを記述するがGraphQLクエリはexportを利用してコンポーネントの外に書く

画像を取得するGraphQLクエリで画像を取得する記述はいくつかあると思うがまだ理解を深めていないが、とりあえず上記の記載でrelativePathのeqで画像ファイル名を指定する。
パスをgatsby-config.jsで設定しているので必要ないと思われる。

gatsbyImageDataに色々オプション？を指定できるようで上記は画像のサイズが200pxとしている。

このGraphQLクエリをコンポーネントで使用するには、コンポーネントのPropsで受け取ることできるが、今回は分割代入で{data}として値を取得する。
GatsbyImageのiamge属性にGraphQLクエリと同じfile.childImageSharp.gatsbyImageDataを指定すれば、画像が表示される。

ちなみにページコンポーネント以外でGatsbyImageを使用したい場合は、useStaticQueryを利用してGrasphQLでデータを取得することができる。

以下のブログを参考にしてください。

まとめ

今回は取り急ぎGatsbyで画像を表示するということをやってみた。
ただGatsbyImageの使い方やGraphQLの使い方がいまいち理解が難しいので、別で勉強してみる。

下記のサイトを参考にさせて頂きました。