activestorageでの画像の表示

Question

実現したいこと

表題の通りactivestorageでの画像の表示と画像を表示した時に付随する形で削除ボタンを表示したいです。

発生している問題・分からないこと

activestorageを実装するまではできていますが、画像の表示ができません。
また、削除ボタンの実装をどうすればいいか分かりません。

該当のソースコード

<div class="container mt-4">
    <div class="row">
        <div class="col-md-3">
            <%= render 'room_menu' %>
        </div>
        <div class="col-md-9">
            <div class="card">
                <div class="card-body">
                    <h4 class="mt-4 mb-4"><b>写真アップロード</b></h4>

                    <%= form_with model: @room do |f| %>
                                            <% binding.pry %>
                        <%= f.label :photo, "画像" %><br>
                        <%= f.file_field :photo %>
                        <%= f.submit %>
                    <% end %>

                    <% if @room.photo.attached? %>
                     <div><%= image_tag(@room.photo) %></div>
                    <% end %>

                </div>
            </div>
        </div>

class RoomsController < ApplicationController

  protect_from_forgery except: [:upload_photo]

  before_action :set_room, except: [:index, :new, :create]
  before_action :authenticate_user!, except: [:show]
  before_action :is_authorised, only: [:listing, :pricing, :description, :photo_upload, :amenities, :location, :update]

  def index
    @rooms = current_user.rooms
 end

  def new
    @room = current_user.rooms.build
  end

  def create
    @room = current_user.rooms.build(room_params)
    if @room.save
      redirect_to listing_room_path(@room), notice: "保存しました。"
    else
      flash[:alert] = "問題が発生しました。"
      render :new
    end
  end

  def listing
  end

  def pricing
  end

  def description
  end

  def photo_upload
  end

  def amenities
  end

  def location
  end

  def update
    new_params = room_params
    new_params = room_params.merge(active: true) if is_ready_room

    if @room.update(new_params)
      flash[:notice] = "保存しました。"
    else
      flash[:alert] = "問題が発生しました。"
    end
    redirect_back(fallback_location: request.referer)
  end

  def upload_photo
    @room.photo.update(params[:file])
    render json: { success: true }
  end

  def delete_photo
    @image = ActiveStorage::Attachment.find(params[:photo_id])
    @image.purge
    redirect_to photo_upload_room_path(@room)
  end


  private
  def set_room
    @room = Room.find(params[:id])
  end
  def room_params
    params.require(:room).permit(:home_type, :room_type, :accommodate, :bed_room, :bath_room, :listing_name, :summary, :address, :is_tv, :is_kitchen, :is_air, :is_heating, :is_internet, :price, :active, :description, :photos)
  end

  def is_authorised
    redirect_to root_path, alert: "権限がありません。" unless current_user.id == @room.user_id
  end
  
  def is_ready_room
    !@room.active && !@room.price.blank? && !@room.listing_name.blank? && !@room.photos.blank? && !@room.address.blank?
  end

end

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

activestorageでの画像登録の方法を調べ、コードを書き直したりしましたが、改善されませんでした。

補足

特になし

Comments

[G23]

改めてコードを確認したところコントローラーのストロングパラメーターが複数形になっていました。単数形に変更したところ画像の表示まではできました。

Answer 1

imageタグで画像が表示されない
ストロングパラメーターの指定ミス
誤：photos　正：photo

画像に付随する削除ボタンの実装
room_controlloer.erbのdelete_photoを
@image = ActiveStorage::Attachment.find(params[:photo_id])
@image.purge
から
@room = Room.find(params[:id])
@room.photo.purge
に変更。元のままだとIDエラーが発生します。
画像の表示については初歩的な部分の見落としでした。また削除ボタンについては基本的な書き方で実装できました。