2019-01-23に投稿

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, }, }, ], }, }, ]

動作確認

それでは、確認してみましょう。
016-1.jpg
ちゃんと表示されていますね。
お疲れさまでした。

Originally published at www.corylog.com

view_list [連載] ブロガー向けGatsby講座
第13回 GatsbyJSでfontawesomeを使う
第14回 GatsbyJSでフォントを変更する
第15回 GatsbyJSでMarkdownで画像を表示する
第16回 GatsbyJSでiframeタグを使う
第17回 GatsbyJSでMrakdown内でコンポーネントを使う

aocory

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

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

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント