Help us understand the problem. What is going on with this article?

Gatsby で Picturefill

なんだかんだで、IE11まだ対応しますよね :angel:
で、Picturefill が必要だったんですね。

Gatsby と一緒に使おうと思ってググったけど、どストライクなの見つからなかったの :poop:

いくつか見つかった記事を参考に色々試したけども、なんか違う。

useEffectpicturefill() しようとしたら、
import 'picturefill' 書いた時点で window がないとビルドでこける。(開発時は大丈夫)

gatsby-browser.jsonClientEntryonRouteUpdatepicturefill() 呼ぶと動く。けど、動的に picture 要素足した(変更した)場合、適応されない。

などなど、紆余曲折ありつつ、 picturefillmutation plugin を使う方法にたどり着いた。
このプラグインは picturefill() を自動でやってくれるというもの。

gatsby-browser.js でインポートするだけ :rocket:

import 'picturefill'
import 'picturefill/dist/plugins/mutation/pf.mutation'
kaminaly
SHIFTBRAIN Inc. 所属。 広く深い海の真ん中で溺れるようにプログラム書いています。 エナジーはレッドブル派。
https://www.shiftbrain.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away