2019-01-31に投稿

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

確認

logo.png
できた!

Originally published at www.corylog.com

view_list [連載] ブロガー向けGatsby講座
第22回 GatsbyJSにGoogle Analyticsを導入する
第23回 GatsbyJSにGoogle AdSenseを導入する
第24回 GatsbyJSでStaticにファイルを置く
第25回 GatsbyJsでWebpackバンドルサイズを確認する
第26回 GatsbyJsでFontを変更するTypeface編

aocory

Crieitはβバージョンで開発中です。進捗は公式Twitterアカウントをフォローして確認してください。 興味がある方は是非記事の投稿もお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

関連記事

コメント