Rails 画像投稿機能の導入
CarrierWaveとMiniMagickを使って画像を投稿できるようにしていきます。この2つはインストール済みということを前提にして進めていきます。
画像のアップローダーの作成
% rails g uploader image
を実行すると、app/uploadesディレクトリにimage_uploader.rbが作成されます。
アップローダーとモデルの紐付け
次に、作成したアップローダーと関連するモデルを紐付けます。Boardモデルのboard_imageカラムと紐付けることを仮定します。board_imageカラムはstring型で生成します。カラムの生成方法は、
rails g migration AddBoardImageToBoards board_image:string
を実行。
class Board < ApplicationRecord mount_uploader :board_image, ImageUploader end
これで紐付けが完了しました。 生成されたアップローダーにデフォルトの画像と、アップロード可能なファイルの種類を指定します。
class ImageUploader < CarrierWave::Uploader::Base def store_dir "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}" end def default_url '〇〇.png' end def extension_whitelist %w(jpg jpeg gif png) end end
アップロード先のファイルを.gitignoreに登録しておきます。
/public/uploads
画像の設定
image_uploader.rb
を編集して、MiniMagick経由で画像のリサイズを行えるようにします。
class ImageUploader < CarrierWave::Uploader::Base include CarrierWave::MiniMagick process resize_to_fit: [300, 200] end
としてあげるとリサイズすることができます。
view側の記述
ラベルと画像投稿用のフォームを作ります。
<%= f.label :board_image,"サムネイル" %> <%= f.file_field :board_image %>
投稿が許可されるようにpermitするカラムの追加もします。
def board_params params.require(:board).permit(:title, :body, :user_id,:board_image) end
フォームに送信した画像を呼び出すには、
<%= image_tag board.board_image_url %>
で呼び出すことができます。
画像を保存しないときはデフォルトにしたい
def default_url '〇〇.png' end
これをimageアップローダーに記述していたため、画像を載せないときはデフォルトで、〇〇.pngが乗ることになる。
参考
https://techtechmedia.com/carrierwave-minimagick-image/ https://ecolotta.hatenablog.com/entry/2020/12/31/175419 https://note.com/hajime38/n/ne2650fdf4559