Gatsby-v3に変えたら画像表示できないのがあった

画像表示できなかった原因

タイトルにもある通り、gatsbyのアップデート後にブログの画像が表示できているものと表示できないものがありました。

直近の記事はちゃんと表示されていたので最初は気づいてなかったんですが、少し前の記事を見たら表示されていなかったので気が付いたって感じです。

最初はアップデートしたときにどこかでエラーが起きているのかなと思ったんですが、表示されていない画像の共通点を探したらmicroCMSでの画像名に日本語を含むものが表示できないということに気が付きました。

アップデートする前までは、microCMSの画像名に日本語が入っていても大丈夫だったのに取ってこれなくなってしまって僕は悲しいです。

というのも、microCMSからgatsbyが画像の情報を取得するときには画像のURLを取ってくるっぽいんです。

URLには基本的にアルファベットとか半角数字しか使えないので日本語とかはURLエンコードされるんですが、そのときに問題が起きてたんじゃないかと思います。

実際に取得できたURLを開いても404エラーで画像が取れていなかったので、エンコードのときに問題があったということでしょう。

microCMS側で画像名を日本語から英語に直せば解決します。簡単です。

厳密にはmicroCMSでは画像の名前を直接変更することはできなさそうなので、同じ画像を違う名前で再アップロードすることになります。

ただ、このブログの場合はまだ記事の数が少なかったので画像名を直す手間も少なかったんですが、記事がたくさんあるブログだと画像名を直すだけでも相当時間をとられるだろうなと感じました。

なので今回をきっかけに画像名は英語でつけるようにします。

gatsbyのアップデートによってこんなことになってしまったので、Gatsby-v3に対するヘイトが少し高まりました。