ActiveStorageを使用しての画像のリサイズがうまくいかない時

はじめに

チーム開発が無事終了し、振り返りに躓いたところをアウトプットしています。
今回は正しくActiveStorageを導入し、リサイズの記述をしているはずなのに、リサイズされない現象が起きました。
解決方法をまとめています。

ActiveStorageの導入手順

まずはじめに、ActiveStorageのインストールを行います。

$ rails active_storage:install

インストールが終わるとdb/migrateディレクトリ内にActiveStorageのマイグレーションファイルが追加されます。
これをmigrateします。

$ rails db:migrate

ActiveStorageを使用して画像表示をするためには、どのモデルで画像を使用するのか宣言する必要があります。
今回はItemモデルに記述していきます。

app/models/item.rb

class Item < ApplicationRecord
  has_one_attached :item_image
end

これでActiveStorageの導入が完了しました。
今回はリサイズについての投稿のため、Viewの作成などは割愛させていただきます。

現状の確認

画像の登録がないときは、no_image.jpgを表示するように指定し、ある場合は該当の画像を表示する記述をしています。

app/models/item.rb

class Item < ApplicationRecord
# この行は前回の記述箇所
  has_one_attached :item_image

# この行以降を追加
  def get_item_image(width, height)
    unless item_image.attached?
      file_path = Rails.root.join('app/assets/images/no_image.jpg')
      item_image.attach(io: File.open(file_path), filename: 'default-image.jpg', content_type: 'image/jpeg')
    end
    item_image.variant(resize_to_limit: [width, height]).processed
  end
end

index.html.erb

<%= image_tag item.get_item_image(260, 180), class: "mb-2" %>

上記の記述でリサイズされると信じていましたが…

結果は上記の通り、揃っているものもあれば、揃っていないものもあります…
（写真は念の為塗りつぶしております…！）

なぜリサイズが反映されないのか？

そもそも今回記載している方法は、画像そのものをリサイズしているのではなく、
画像を表示するための箱の縦と横の幅を指定しているに過ぎません。
そのため、箱のサイズよりも投稿された画像幅が短い場合は意味がなくなってしまいます。
イメージはこんな感じ↓↓↓

改善策

resize_to_limitをresize_to_fillに変えましょう！
resize_to_fillを使用すると元画像から指定した、サイズで切り抜きを行い表示させます。
そのため、元画像の全てを表示したい場合はfillの使用はお勧めしませんが、
切り抜かれた画像でも問題ない場合はfillを使用しましょう。

app/models/item.rb

class Item < ApplicationRecord
  has_one_attached :item_image

  def get_item_image(width, height)
    unless item_image.attached?
      file_path = Rails.root.join('app/assets/images/no_image.jpg')
      item_image.attach(io: File.open(file_path), filename: 'default-image.jpg', content_type: 'image/jpeg')
    end
    # limit→fillに変更
    item_image.variant(resize_to_fill: [width, height]).processed
  end
end

修正すると、以下の通り画像が指定通りのサイズになりました！
（色は手動で塗りつぶしております…💦）

他にもresize_toには種類があるため最後に、メモしておきます！

resize_to_fit(width,height)

画像の縦横比を維持したままリサイズ

app/models/モデル名.rb

process resize_to_fit: [width, height]

resize_to_limit(width,height)

画像の縦横比を維持したままリサイズ
ただし、指定した縦横サイズ以内の場合はリサイズしない

app/models/モデル名.rb

process resize_to_limit: [width, height]

第三引数で余白部分の塗りつぶしを指定、
第四引数で余白が発生した際の画像の位置を指定可能

app/models/モデル名.rb

process resize_to_limit: [width, height, "#ffffff", "Center"]

resize_to_fill(width,height)

画像の縦横比を維持せず、指定したサイズで切り抜きを行う

app/models/モデル名.rb

process resize_to_fill: [width, height]

第三引数で切り抜く中心点を指定可能

resize_to_fill(width,height)

画像の縦横比を維持せず、指定したサイズで切り抜きを行う

app/models/モデル名.rb

process resize_to_fill: [width, height, "Center"]

最後に

改善策までは、メンターさんにご教示いただいた内容をまとめています！
最後のまとめはこちらの記事を参考にしました
ありがとうございます！