gatsbyのimageについて

konnyaku

きっかけ

markdown に画像をアップロードしても自由にクラスを指定できず細かい設定ができない!!!

解決策

markdown の情報を画像に render しているのはどうやらこの二つのプラグインのようだ。

  • gatsby-remark-images
  • gatsby-plugin-sharp

そのうち実際に html のコードに変換しているプラグインを見つける。gatsby のいいところは画像を自動で最適化してくれるところらしいが、このプラグインで最適化をしていそうだ。

gatsby-plugin-sharpではgatsby-config.jsで設定したものを元に<img>タグにパラメータを返す。このプラグインが最適化をしている。

gatsby-remark-imagesでは![]()のコードを読み込んで render してくれている。なのでこっちを書き換えれば、クラスを指定することができそうだ。

調べてみるとwrapperStyleという option があり、そこで style の指定ができる。これを追加すれば、class を指定せずに済みそうだ。