GatsbyJSでMarkdownで画像を表示する
01 23, 2019
GatsbyJSでMarkdownで画像を表示する
Markdownファイルは、
という形で画像を挿入することができますが、実はそのままだと今くいきません。そこでgatsby-remark-imagesを使用します。
gatsby-remark-imagesのインストール
npmコマンド一つで終わります。
npm install --save gatsby-remark-images gatsby-plugin-sharpgatsby-remark-imagesの設定
gatsby-remark-imagesは、gatsby-transformer-remarkのプラグインですので、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,
},
},
],
},
},
]動作確認
それでは、確認してみましょう。
ちゃんと表示されていますね。
お疲れさまでした。
