What's?

Home / Gatsby JS でBlogを作成する際、マークダウンファイルに設定したimageを扱う方法

Gatsby JS でBlogを作成する際、マークダウンファイルに設定したimageを扱う方法
April 10, 2020

DEVELOPMENT

web
node
js
Gatsby

Gatsby JSでのblogのスターターを使った際、マークダウンファイルの中に、記事のカバーimage等のパスを設定し、リストページでその画像を使いたいことがあると思います。

その際、そのマークダウンファイルで指定した画像ファイルをindexページや、記事ページで扱う方法を紹介します。

サクッと出来るかと思いましたが、リファレンス通りやってもエラーとなり、全く動かなく、手こずったので

書いておこうと思います。

参考

Gatsby JSについてはこちらを見て下さい。 Gatsby js でブログを作成するのは簡単だった

前提

$ gatsby new gatsby-starter-blog https://github.com/gatsbyjs/gatsby-starter-blog

gatsby-starter-blog でgatsby jsが動く環境にある


必要なpluginのインストール

yarn add gatsby-transformer-sharp gatsby-plugin-sharp gatsby-remark-images gatsby-image

※スターターの時点で入っているものもある


Configの設定

マークダウンファイル中で設定した画像パスをプロセスする

gatsby-remark-imagesを

gatsby-transformer-remarkのoptionsに設定します。

  • maxWidth
  • quality
  • linkImagesToOriginal をその中に設定します

他の詳しくは ここ


  • gatsby-config.js
plugins: [
    'gatsby-plugin-catch-links',
    'gatsby-transformer-sharp',
    'gatsby-plugin-sharp',
      {
        resolve: 'gatsby-source-filesystem',
        options: {
          name: 'blog',
          path: `${__dirname}/blog`
        }
    },
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          {
            resolve: 'gatsby-remark-images',
            options: {
              maxWidth: 好きなサイズに,
              quality: 90,
              linkImagesToOriginal: true,
            }
          }
        ]
      }
    }]

markdownファイルにimage pathを設定

---
title: コリコリ
date: "xxxx-xx-xx xx:xx:xx"
description: "説明文"
avatar: './avatar.jpg' < これを追加
---

この場合、ファイルの構成は

content/
 - blog/
  - hello-world
   - index.md
   - avatar.jpg

記事と同じ階層にimgが配置されている状態


indexページに入れてみる

  • src/pages/index.jsx
import Image from "gatsby-image"
.
.
.

const BlogIndex = ({ data, location }) => {
  return (
    <div>
      .
      .
      // 画像表示部分
      <Image
        fluid={node.frontmatter.avatar.childImageSharp.fluid}
      />
      <Image
        fixed={node.frontmatter.avatar.childImageSharp.fixed}
      />
      .
      .
      .
    </div>
  )
}
export default BlogIndex

export const pageQuery = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }
    allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
      edges {
        node {
          excerpt
          fields {
            slug
          }
          frontmatter {
            date(formatString: "MMMM DD, YYYY")
            title
            description
            avatar {
              childImageSharp {
                fixed(width: 50, height: 50) {
                  ...GatsbyImageSharpFixed
                }
                fluid(maxWidth: 1000, quality: 90) {
                  ...GatsbyImageSharpFluid_withWebp_tracedSVG
                }
                // 好きなタイプを選んで下さい詳細は
                // こちら → https://www.gatsbyjs.org/packages/gatsby-image/
              }
            }
          }
        }
      }
    }
  }
`

記事詳細ページ(blog-post.js)でも同じように書けば使えます。

※ gatsby-imageの仕様はこちら

material-uiのAvatarコンポーネントを使いたい時

Materia UIのAvatarなど、画像のパスをわたして、画像を描画する際、上記の方法ではうまくいきません。 だからといって、pathをそのまま渡しても描画されませんね。

その場合は下記のようにします。

<Avatar aria-label="recipe" className={classes.avatar} src={node.frontmatter.avatar.childImageSharp.fixed.src} />

最後に.srcをつけるだけです。

まとめ

意外と記載がなく、苦労しました。

パスの取得方法は探すのに結構時間がかかってしまいました。

お役に立てたら幸いです。

うかい / 株式会社UKAI
うかい@代表取締役兼エンジニア株式会社UKAI
Nobuyuki Ukai

株式会社UKAI 代表取締役CEO。建築を専攻していたが、新卒でYahoo!Japanにエンジニアとして入社。その後、転職、脱サラ、フリーランスエンジニアを経て、田舎へ移住し、ゲストハウスの開業、法人成り。ゲストハウス2軒、焼肉店、カフェ、食品製造業を運営しています。詳細はこちらから

🙏よかったらシェアお願いします🙏
WRITTEN BY
うかい / 株式会社UKAI
うかい@代表取締役兼エンジニア株式会社UKAI

Nobuyuki Ukai

株式会社UKAI 代表取締役CEO。建築を専攻していたが、新卒でYahoo!Japanにエンジニアとして入社。その後、転職、脱サラ、フリーランスエンジニアを経て、田舎へ移住し、ゲストハウスの開業、法人成り。ゲストハウス2軒、焼肉店、カフェ、食品製造業を運営しています。詳細はこちらから

CONACT
入力して下さい
Slack からもどうぞ

※お気軽にどうぞ!(6月20日まで有効!お早めに)

COPYRIGHT © 2020 UKAI CO., LTD. ALL RIGHTS RESERVED.