GatsbyJSでMarkdownで画像を表示する

GatsbyJSでMarkdownで画像を表示する

Markdownファイルは、

![画像の説明](イメージファイルのパス)

という形で画像を挿入することができますが、実はそのままだと今くいきません。そこでgatsby-remark-imagesを使用します。

gatsby-remark-imagesのインストール

npmコマンド一つで終わります。

npm install --save gatsby-remark-images gatsby-plugin-sharp

gatsby-remark-imagesの設定

gatsby-remark-imagesは、gatsby-transformer-remarkのプラグインですので、gatsby-config.jsの中で書く部位が少し異なります。
gatsby-config.js plugins: [ `gatsby-plugin-sharp`, { resolve: `gatsby-transformer-remark`, options: { plugins: [ { resolve: `gatsby-remark-images`, options: { // It's important to specify the maxWidth (in pixels) of // the content container as this plugin uses this as the // base for generating different widths of each image. maxWidth: 590, }, }, ], }, }, ]

動作確認

それでは、確認してみましょう。

ちゃんと表示されていますね。
お疲れさまでした。