プロフィール画面に投稿する、ユーザーの画像サイズを調節したい

Question

実現したいこと

active storageを使った、画像投稿をした際に、画像サイズを調節したい

前提

rails7を使ってPFを作っています。
プロフィール画面でユーザーのアバターの画像を投稿しようと考えているのですが、上手くいかないです。

発生している問題・エラーメッセージ

画像を投稿した時に、正しく画像が投稿されない。小さい四角に？のマークしか表示されない

エラーメッセージはなし

該当のソースコード

gem file

source "https://rubygems.org"
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby "3.2.1"

# Bundle edge Rails instead: gem "rails", github: "rails/rails", branch: "main"
gem "rails", "~> 7.0.5"

# The original asset pipeline for Rails [https://github.com/rails/sprockets-rails]
gem "sprockets-rails"

# Use postgresql as the database for Active Record
gem "pg", "~> 1.1"

# Use the Puma web server [https://github.com/puma/puma]
gem "puma", "~> 5.0"

# Bundle and transpile JavaScript [https://github.com/rails/jsbundling-rails]
gem "jsbundling-rails"

# Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev]
gem "turbo-rails"

# Hotwire's modest JavaScript framework [https://stimulus.hotwired.dev]
gem "stimulus-rails"

# Bundle and process CSS [https://github.com/rails/cssbundling-rails]
gem "cssbundling-rails"

# Build JSON APIs with ease [https://github.com/rails/jbuilder]
gem "jbuilder"

# Use Redis adapter to run Action Cable in production
# gem "redis", "~> 4.0"

# Use Kredis to get higher-level data types in Redis [https://github.com/rails/kredis]
# gem "kredis"

# Use Active Model has_secure_password [https://guides.rubyonrails.org/active_model_basics.html#securepassword]
# gem "bcrypt", "~> 3.1.7"

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem "tzinfo-data", platforms: %i[ mingw mswin x64_mingw jruby ]

# Reduces boot times through caching; required in config/boot.rb
gem "bootsnap", require: false

# Use Sass to process CSS
# gem "sassc-rails"

# Use Active Storage variants [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
# gem "image_processing", "~> 1.2"
gem "sorcery"
gem "ransack"
gem "bootstrap"
gem "font-awesome-sass"
gem "jquery-rails"
gem "faker"
gem "draper"
gem "mini_magick"


group :development, :test do
  # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
  gem "debug", platforms: %i[ mri mingw x64_mingw ]
end

group :development do
  # Use console on exceptions pages [https://github.com/rails/web-console]
  gem "web-console"

  # Add speed badges [https://github.com/MiniProfiler/rack-mini-profiler]
  # gem "rack-mini-profiler"

  # Speed up commands on slow machines / big apps [https://github.com/rails/spring]
  # gem "spring"
end

group :test do
  # Use system testing [https://guides.rubyonrails.org/testing.html#system-testing]
  gem "capybara"
  gem "selenium-webdriver"
  gem "webdrivers"
end

app/views/mypage/profiles/show.erb

<div class="card">
  <!-- Card header -->
  <div class="card-header">
    <h3 class="mb-0">プロフィール</h3>
  </div>
  <!-- Card body -->
  <div class="card-body">
      <%= form_with model: @user, url: mypage_profile_path do |f|  %>
        <div class="d-lg-flex align-items-center justify-content-between">
          <div class="d-flex align-items-center mb-4 mb-lg-0">
            <%= image_tag @user.decorate.avatar.variant(resize_to_limit: [200, 200]), class: 'avatar-xl rounded-circle' %>
            <div class="ms-3">
              <h4 class="mb-3">Your avatar</h4>
              <%= f.file_field :avatar %>
            </div>
          </div>
          <div>
            <%= f.submit "更新", class: "btn btn-outline-white btn-sm" %>
            <% if @user.avatar.attached? %>
              <%= link_to "削除", mypage_profile_avatar_path, class: "btn btn-outline-danger btn-sm", method: :delete, data: { confirm: "削除します" } %>
            <% end %>
          </div>
        </div>
      <% end %>
    <hr class="my-5">
    <div>
      <h4 class="mb-0">Personal Details</h4>
      <p class="mb-4">
        Edit your personal information and address.
      </p>
      <!-- Form -->
      <%= form_with(model: @user, url: mypage_profile_path) do |f| %>
        <div class="mb-3">
          <%= f.label :email, class: 'form-label' %>
          <%= f.email_field :email, class: 'form-control', required: true, placeholder: 'Email' %>
        </div>
        <div class="mb-3">
          <%= f.label :name, class: 'form-label' %>
          <%= f.text_field :name, class: 'form-control', placeholder: 'まるい' %>
        </div>
        <div class="mb-3">
          <%= f.label :password, class: 'form-label' %>
          <%= f.text_field :password, class: 'form-control', rows: 3, placeholder: 'Password' %>
        </div>
        <div class="col-12">
          <!-- Button -->
          <%= f.submit class: 'btn btn-primary' %>
        </div>
      <% end %>
    </div>
  </div>
</div>

試したこと

参考文献を元に、画像サイズを調節するために、imagemagickとmini_magickをinstallして、variantメソッドを使ったが、上手くいかなかった。

参考文献
https://pikawaka.com/rails/active_storage

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

画像サイズを調節するvariantメソッドを使う際には、mini_magickかvipsを選択できるようになっている。しかし、Rails7系の場合、vipsがデフォルトで設定されてしまっているので、config/application.rbでmini_magickに設定を変更してあげると、installしたmini_magickが使えるようになり、画像が正常に表示されるようになる

参考文献
https://abillyz.com/watanabe/studies/430