GatsbyJSでStaticにファイルを置く

Staticファイルを置きたい

Gatsbyはイメージファイルなどは自動で圧縮してくれるし、リサイズもしてくれるデキるやつです。
しかし、PWAにサイトをしたり、ソーシャルアイコンのイメージ画像を扱う時は/img/logo.pngなどのようにファイルを扱いたいです。そこでやり方を調べました。

GatsbyJSでStaticにファイルを置く方法

• rootディリクトリにstaticフォルダーを作成
• staticにファイルを置く
• withPrefixを読み込むコンポーネントに記載
• gatsby-config.jsに変更

rootディリクトリにstaticフォルダーを作成

/blog/static/imgを作成します。

staticにファイルを置く

/static/img/logo.pngを今回は作成します。

withPrefixを読み込むコンポーネントに記載

staticファイルを読み込むにはwithPrefixの記載が必要です。

import { withPrefix } from 'gatsby'

render() {
  return <img src={withPrefix('/img/logo.png')} alt="Logo" />;
}

gatsby-config.jsに変更

module.exports = {
  pathPrefix: `/img`,
}

注意"/img/"と記載してはいけません。

確認

できた！