![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/967bd4c4-363c-4b21-bb39-8a3dd6bee1c3/171179514-46dafc98-b4c4-4143-b97c-8242b663763b.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240726%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240726T170653Z&X-Amz-Expires=3600&X-Amz-Signature=77989572dc7da0f1fcebffd1e9b51894cf02fc0c789b52c76f50094ddfd24d20&X-Amz-SignedHeaders=host&x-id=GetObject)
easy-notion-blogでブログを始めたのはいいでのすが、画像が上手く読み込めないことが何回かありました。
その内容をツイッターでつぶやくと、開発者のおとよさんがリプしてくれました。
結論:本家のコミットを取り込めば修正できる
差分を取り込めばいいことはわかりましたが、どうやって取り込めばよいかわかりません。。。
そんな時に素晴らしい記事を見つけました。
基本的に上記の記事の手順通りに行うと本家の変更を取り込むことができます。
今回、画像の表示不具合を改善するために2つのPR(プルリクエスト)を取り込みました。
Refetch expired images by using swr #95
上記のコミットを上から順に取り込んでいきました。
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/06ce2e2e-a3c4-4f69-ac54-2f006d58b1a6/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240726%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240726T170653Z&X-Amz-Expires=3600&X-Amz-Signature=df28bf9faaa1e87698f95cbd686d649c88d0fdacf0426a000313c0587d938d26&X-Amz-SignedHeaders=host&x-id=GetObject)
取り込むための実行したコードは以下です。
$ cd easy-notion-blog
$ git remote add root https://github.com/otoyo/easy-notion-blog.git
$ git fetch root
$ git cherry-pick 885a334f5100ae18b90b7d33d055be9905887c55
$ git cherry-pick 8469ac3aaefa5473cbdbd92ef08f0e092332a278
$ git cherry-pick 8731676dd6891645e79ec763d7d4bc09fa6dd745
$ git cherry-pick 8703563945fc1c5137065b282c3bcc016c2b8768
$ git cherry-pick 9bc0dbca49fafda3a939e1931bd17e0071b3f92a
$ git cherry-pick 78cb5d2f4a0db44d413145d4074e3350495df306
$ git cherry-pick 10d4736e7d56e16f56f5b3274b2d767a081a33e0
$ git add .
$ git commit -m"refetch-expired-images-by-using-swr"
$ git push -u origin main
Fix expiry check #96
まだ直っていなかったようです。
上記と同じようにコミットを取り込んでいきます。
今回取り込むコミットは一つです。
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/d82aad6e-efee-4fd9-a4bd-7eed1a4dd3ee/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240726%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240726T170653Z&X-Amz-Expires=3600&X-Amz-Signature=933b820197f6d440db0f7019e8c478b9b046df318b9a21d4ffe6544243fdc60e&X-Amz-SignedHeaders=host&x-id=GetObject)
取り込むための実行したコードは以下です。
ちなみにgit remote add root https://github.com/otoyo/easy-notion-blog.git
は、すでにrootにオリジナルのeasy-notion-blogのリポジトリを登録しているため、一度登録すれば実行する必要はありません。
$ cd easy-notion-blog/
$ git fetch root
$ git cherry-pick 3f96e5c71f905547e0ec3d482cf7da5e2f9f5a4b
$ git add .
$ git commit -m"fix-refetching-expired-images"
$ git push -u origin main
これで無事に画像の表示不具合が改善されました。
画像表示不具合の背景と対応内容
開発者の方が解説してくれています。
この内容が理解できるようにガンバリマス!!