GatsbyJSでStaticにファイルを置く

01 30, 2019

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/"と記載してはいけません。

確認

logo.png できた!


コリ

コリといいます。奈良県でサラリーマンをしています。GatsbyJSでサイトを作るのが趣味です。