Next Link使用時にlazysizesでの画像更新ができない場合の対応方法

公開日時

先日、lazysizesで画像を遅延読み込みさせる対応を行ったが、next/linkを使ってページ遷移をせずに動的にページ内のコンテンツを書き換えている場合に画像が更新されない現象が発生した。

調べてみるとlazysizes attribute changeという公式プラグインが用意されていたのでこれを使って解決できた。


Related #js

Next.jsのPreview Mode時はAnalyticsを無効化する

cookieの__next_preview_dataキーで判定

Alexaに気温と二酸化炭素濃度を教えてもらう

「Alexa、気温」でセンサー情報を教えてくれるようになった

jsでクリップボードにコピーするボタンを実装する

Clipboard.writeText()を使う

Cloud FunctionsでFirebase Authenticationの認証情報を取得する

functions.https.onCallを使用している場合はcontextパラメータを受け取ることができる

AWS SESの受信メールを暗号化してs3に保存しLambdaで読み込む

jsの場合、複合処理を独自実装する必要がある

RaspberryPi ZeroにNode.jsの最新版をインストールする

vercel/install-nodeを使うと手軽にインストールできた