本サイトではアフィリエイト広告を利用しています。
2018/10/12画像挿入用プラグインの導入
前回の【画像の埋め込み】 の記事の続きです。
記事内への画像挿入がうまくできなかったので、画像用のプラグインを導入してみます。
gatsby-remark-imagesを使ってみる
npmで必要なプラグインをインストール
https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-images を参考にやってみる
npm --save install gatsby-remark-images gatsby-plugin-sharpgatsby-config.jsに以下内容を追加
`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,
},
},
],
},
},表示できるようになった様子。
mdファイルと同じ場所に画像を配置すれば、 前回の【画像の埋め込み】 の記事のやり方で問題なく表示できるようになった。
画像を静的コンテンツ設置ディレクトリに設置
マークダウンと同じディレクトリに画像を設置しました。
マークダウン内に上記URLを指定してimgタグを記載
画像のパスは以下のようになっており、/static/以下に配置されたうえで、パスを生成して置き換えてくれている様子。
/static/image-63f8d35deb28cd32cef133e59100e5e5-f8fb9.jpg
