Webアプリケーションに画像をアップできない原因

Webアプリケーションに画像をアップできない原因

Railsで作成したWebアプリケーションに画像をアップできずに、かなりハマってしまった事があったので、こちらにまとめます。

下記のように画像を登録してみたところプレビューするとエラーになってしまいました。

Image from Gyazo

プレビューを押すと以下のようになってしまいます。

Image from Gyazo

色々調べて、試してみたところ画像の拡張子に問題があると分かりました。
iPhoneなどで撮影したものだと、iPhone特有の拡張子HEICになってしまい、これはJPGで保存するより容量が半分で済むがPCでは画像が見れないとのこと。
ちなみに相手がHEIC形式の画像をLINEで送ってきて、それを保存したらJPGになる。(まだここは、不確かなので今度試してみようと思います。)
iPhoneでスクショしたやつとかは、基本的にJPGになってます。
active storageのバリデーションに以下のようにheicを追加してもダメだった。

validates :eye_catch, attachment: { purge: true, content_type: %r{\Aimage/(png|jpeg|heic)\Z}, maximum: 10_485_760 }

[carrierwave]Gemも以下のようにしてもheic拡張子は、使えなかったがcarrierwave gemの時は、そもそも画像が選択できないようになっているが、active storageは、heic拡張子が使えないにも関わらず画像が選択できるようになっているのがハマった原因でした。

  def extension_allowlist
    %w[jpg jpeg gif png heic]
  end

参考にした記事

iPhoneで撮った写真が変な拡張子.heicになってる!PCで見れない!って人のために解決方法をまとめました。 | APPTOPI

「.HEIC」から「.JPG」に!iPhoneで撮影する写真の拡張子を変更する方法! | にこスマ通信