デプロイしたら画像が表示されなくなった件について 🔰

yarn dev や yarn build , start で表示されていた画像がデプロイ後に表示されない！ 👻

今回は、Next.js で書いたデータを vercel にデプロイした時の出来事ですが、自分のググり力では解決方法の記事がヒットしなかったので記事にしてみます。

結論: 画像拡張子 jpg を JPG に直したら表示された 🤔

結論だけ見るとなんともお粗末な話ですが、これだけです。

jpeg の拡張子は JPG 表記と jpg 表記が存在する 😳

なぜ大文字表記と小文字表記のデータが存在するのかは今回調べた限りでは不明です。

windows 等では、 JPG jpg jpeg をそれぞれ区別しないという記事も見かけるので、それらを区別せず、拡張子をつける側のソフトや設定によってことなるのがもともとの流れであり、マジョリティなのかもしれません。
もし、詳細をご存知の方がみえましたら、教えていただけるとうれしいです。

ちなみに今回、画像データに大文字のJPG拡張子をデフォルトで与えているのは、NX-Studioという Nikon のソフトで、デジタル一眼レフで撮影したRawデータをjpegに書き出すために使用しています。
また、 Nikon へ問い合わせたところ、NX-Studioは、拡張子を小文字にすることができない仕様とのことです。

もともとの拡張子表記を使わざるをえない 🤖

上記NX-Studioで生成されたJPGファイルの拡張子を、手打ちで小文字に変えた場合も、squooshによるファイルサイズ変更に伴う拡張子の小文字への変更も、特にエラーが表示されていないにもかかわらず、デプロイ後、画像が表示されていませんでした。

画像をプレビュー等で開くと、JPEG画像と認識されているので、どこでもともとの拡張子が大文字のJPGだったのかを認識し、本番環境で別物として認識しているのかは不明です。

だたし、新たに yarn create next-appでつくったファイルに対して同じ症状は再現できませんでした。

私のファイル内固有の症状のようです。

なお、直接関係あるかは不明ですが、自身で確認できた他の症状としては、.historyというディレクトリがつくられており、そこへファイル変更の履歴が全て記載される状態で、そのディレクトリを削除しても、ファイルに変更が加えられた時点で、再度.historyディレクトリが自動生成される、といったものがあります。

前提条件 💻

まず、環境ですが pc は mac 、 扱った画像はjpegで、 画像の保存先はNext.jsの public / images、デプロイ先はvercel です。

エラー表記について 🙅🏻

エラー表記としては、
まず、 yarn dev ではエラー表示なし。
次に、　yarn build からの yarn start での確認時もエラー表示なし。
デプロイ時もエラー表示なし。
エラーは最終的に画像が表示されていない、という 404 のエラーだけでした。

なぜ拡張子を大文字から小文字に変更したのか 🕵🏻‍♂️

さて、最後に私がなぜ拡張子の文字を大文字から小文字に変更したのかですが、理由としては、拡張子がjpgだけだと思い込んでいたからです。
ゆえに、ネット上で画像サイズを変更したファイルだけがたまたまJPGであったために、「ネット上の変換ソフトの問題だろう」という思い込みから、ほかの画像拡張子jpgに統一したのです。

最後に ✍🏻

今回、必要最低限の調査から書き起こした記事なので、至らない点が多いと思われますが、もし疑問点、補足等ございましたら、Twitter DM 等でコメントいただけると幸いです。