【Gatsby】静的画像の読み込み方

静的画像はgatsby-plugin-imageからStaticImageを使う。
以下のように呼び出す。

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

例えば画像はsrc/static/から呼び出すとする。
gatsby-types.d.tsを開いてpluginsを編集。

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `static`,
    path: `${__dirname}/src/static`,
  }
},

これをすると、例えばsrc/static/hoge.pngだけでなく、src/static/top/tophoge.pngも呼び出せるようになる。
もし呼び出したくないディレクトリがあるならignoreから除外してあげること。

実際の呼び出し方、例えばsrc/index.tsxからははこんな感じ。相対パス。

<StaticImage
  src="./src/static/hoge.png"
  alt="画像"
  as="figure"
/>

as=”figure”を付けると、figureで囲んでくれる。

注意点：相対パス

相対パスなので、例えば/components/atoms/Hogeから呼び出すとすると、パスは../../../static/hoge.pngみたいになる。

TypeScriptメモ

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

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

srcの中にtypesディレクトリを作って、image.d.tsを入れといた。

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

SVGとか他にも必要になったら随時調整。