Honmushi blog
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-sharp

gatsby-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タグを記載

![My Image](./image.jpg)

My Image

画像のパスは以下のようになっており、/static/以下に配置されたうえで、パスを生成して置き換えてくれている様子。

/static/image-63f8d35deb28cd32cef133e59100e5e5-f8fb9.jpg
  • このエントリーをはてなブックマークに追加
HOMEPROFILEPRIVACY POLICY