refileのattachment_image_tagで画像がうまく表示されない場合に

#概要
現在スクールにてRailsの学習中で、画像表示にrefileを使用しましたが、正しく記述しているはずなのに上手く表示されず少し苦労したので備忘録も兼ねて対処法をメモします。(スクールのカリキュラムには後半にちゃんと対処法が書いてありましたが、自分が読み飛ばしてしまい、対処に時間がかかってしまいました。)同じ症状の方の助けになれば幸いです。

#環境
OS: macOS Catalina バージョン10.15.3
Ruby: 2.5.7p206
Rails: 5.2.4.1
開発環境：VirtualBox + vagrant

#前提
こちらの記事にある1〜5のインストール・設定・記述は実施しました。
refileの基本的な使い方が良く纏まっていると拝見いたしましたので、引用させていただきます。
refileの基本と複数画像のアップロード

ちなみにgemのバージョンは
refile 0.6.2
refile-mini_magick 0.2.0
です。

#症状
正しく設定・記述されているはずなのにブラウザ上で以下の様になってしまい、画像がうまく表示されませんでした。

• Chrome
  

![chrome_image_error.png] (https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488358/249417cd-9f88-76b4-ff01-9f85ffa888fc.png)

• Safari
  

![safari_image_error.png] (https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488358/c9fc3482-6699-a1fe-fbb2-affea96f14b4.png)

#確認してみたこと、試してみたこと

• データベースの中身の確認

そもそもデータベースのimage_idカラムに保存がされていないのではないかと思い確認。
自分の場合はlistsテーブルにimage_idカラムを設置していたので、

rails dbconsole

から

SELECT * FROM lists

で全レコードを表示。
image_idカラムを確認しましたが、きちんと文字列が記載されていたのでデータベースへの保存自体はうまくいっている様でした。

• ブラウザの変更

あまり関係ないかもと思いつつ、上記の通りChromeとSafari両方のブラウザで表示状況を確認しましたがどちらも上手く表示されていませんでした。

• 別の拡張子の画像ファイルをアップ

最初に投稿していた画像が.jpgだったので、試しにと思い.pngの画像もアップしてみる。しかしやはり上手く表示されていませんでした。

#原因・解決法
結論から言うとattachment_image_tagの書き方が原因でした。

上記のリンク先にもある通り、自分が見た多くの記事ではviewの記述としては

<%= attachment_image_tag モデル名, :カラム名(末尾の_idは除く),format: '拡張子名(例: jpeg)', :fill, 横幅の数値(例: 100), 高さの数値 %> 

が紹介されていましたが、これの:fill, 横幅, 高さの部分が問題だった様です。
自分の場合は以下の記法に変更して画像が表示される様になりました。

<%= attachment_image_tag モデル名, :カラム名(末尾の_idは除く),format: '拡張子名', size: "横幅数値x高さ数値" %>

⚠️最後の横幅数値、高さ数値の間の記号は小文字のエックスです。

例：

<%= attachment_image_tag list, :image, format: 'jpeg', size: "100x100" %>

これで以下の様に、きちんと表示されるようになりました！

![success_image.png] (https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488358/ff4bbe35-1531-2af6-7d63-f9327c31726a.png)

#後書き
なぜ:fillでの指定はダメでsize:ならいけるのかという原理的な理由は分かりませんでしたが、自分の場合はこれでとりあえず画像がちゃんと表示される様になりました。今後これで進めて行った場合に不具合が出てきたら都度追記していこうと思います。
また、冒頭でも述べた通りスクールのカリキュラム内で、後半にではありましたがきちんと対処法が書かれていました。(自分はそこまでカリキュラムを進めていたので読んでいたはず。)今後は1文字も読み飛ばさず、しっかりと確認しつつ取り組んでいこうと思います！