Counts the Clouds

gatsby-remark-imagesで画像を表示する
2021.06.16

Gatsby

gatsby-remark-imagesプラグインを導入

保留していた画像の取り扱いは、やはりGatsby wayで行くことにする。ごちゃごちゃ考えるより、まずは記録をつけることを最優先にする。画像をMarkdownと同階層に置き、相対パスで指定。

parrish-freeman-29W9RscuUMw-unsplash.jpg

公式の通り書くと一瞬でできた。画像はUnsplashからいただいた。

出力はこのようになっている。みやすさのためいろいろ省略している。

<span class="gatsby-resp-image-wrapper">
  <span class="gatsby-resp-image-background-image"></span>
  <img
    class="gatsby-resp-image-image"
    alt="parrish-freeman-29W9RscuUMw-unsplash.jpg"
    title="parrish-freeman-29W9RscuUMw-unsplash.jpg"
    src="/static/.../0a2b8/gatsby-remark-images-cloud.jpg"
    srcset="
      /static/.../0b054/gatsby-remark-images-cloud.jpg 171w,
      /static/.../ebfc4/gatsby-remark-images-cloud.jpg 343w,
      /static/.../0a2b8/gatsby-remark-images-cloud.jpg 685w,
      /static/.../ea522/gatsby-remark-images-cloud.jpg 1028w,
      /static/.../0d465/gatsby-remark-images-cloud.jpg 1370w,
      /static/.../0f98f/gatsby-remark-images-cloud.jpg 1920w
    "
    sizes="(max-width: 685px) 100vw, 685px"
    loading="lazy"
    decoding="async"
  >
</span>

gatsby-resp-image-background-imageクラスの背景に20x17の超低解像度画像が指定されていて、実画像が読み込まれるまではそれが表示されるようになっている。また端末解像度に応じて適切なサイズの画像を表示するためのレスポンシブイメージが指定されている。

ローカルで画像をどのように管理するか考える。名前だけだと全部がフラットになって収集がつかなくなりそうだし、記事ごとにディレクトリ切るのはめんどくさそうなのでposts/images/<記事slug>-<画像名>.(jpg|png)にする。記事slugさえつけておけばなんとかなるだろう。

![](./gatsby-remark-images-cloud.jpg)
![](./gatsby-remark-images/cloud.jpg)
![](./images/gatsby-remark-images-cloud.jpg)

外部画像

Placeholder.comを使って、外部URLの画像を表示してみる。

こちらは、imgタグがそのまま表示された。

<img src="https://via.placeholder.com/685/FFFFFF/000000/?text=Sample" alt="">

サイズ指定もなくloading属性もないので、基本的には外部画像はローカルに配置しなおしてから使うことにする。外部画像をローカルに持ってくるプラグインもあるみたいだが、複雑になりそうなので今はやめておく。

syntax highlightingが消える

gatsby-transformer-remarkがだぶって、gatsby-remark-prismjsが動かなくなっていた。どちらもgatsby-transformer-remarkのプラグインなので、まとめると正しく動いた。

module.exports = {
  plugins: [
    // ...
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-prismjs`,
            // ...
          },
          {
            resolve: `gatsby-remark-images`,
            // ...
          },
        ],
      },
    },
    // ...
  ],
};