今回は以下のエラーに出会った際の解決策をご紹介します。
Ruby on Rails
アクティブストレージを使用して itemモデルとアソシエーションを行ったが、
<%= image_tag item.image %>という記述でビューで表示されない
最終的なゴール
<%= image_tag item.image %>という記述を使用して、
index.html.erb(ビュー)に画像を一覧で表示させたい
現在の状況
・Railsを使用
・アクティブストレージGemを導入・正しくアソシエーション済
・アクティブストレージで投稿した画像はデータベースに保存されている
・モデルの名前は「item」
・データベースに保存した画像を一覧で表示するためにeach文を使用
コントローラー indexアクション
def index
@items = Item.all.order('created_at DESC')
end
Item.all → itemモデルの中のデータを全て取得するよう指定している
order('created_at DESC') → データの中身の順番を指定している
@items → インスタンス変数(@items)に 、=右記(itemモデルの全てのデータ)を指定することでビューで使用できるようになる
indexのビュー
<% @items.each do | item |%>
<%= image_tag item.image, class: "item-img" %>
<% end %>
<% インスタンス変数(@items).each do | ブロック変数 |%>
<% end %> → インスタンス変数内のデータを1つずつ取り出すことができるようになる
・・itemモデルの全てのデータを一覧表示することができる!
発生している問題・エラー
ArgumentError in Items#index
Can't resolve image into URL: to_model delegated to attachment, but attachment is nil
翻訳
引数のエラー
画像をURLに解決できません:to_modelは添付ファイルに委任されていますが、添付ファイルはnilです
自分で試したこと
エラー画面のコンソールにて「item.image」の中身を確認
>> item.image
=> #<ActiveStorage::Attached::One:0x00007fd4aa8ce228 @name="image", @record=#<Item id: 9, title: "a", text: "aa", category_id: 3, condition_id: 2, shipping_fee_id: 2, prefecture_id: 2, send_day_id: 3, price: 1111, user_id: 1, created_at: "2022-05-06 11:26:40", updated_at: "2022-05-06 11:26:40">>
・アクティブストレージを使用して投稿した画像のデータは取得できている
・each文を使用して、他のデータを取得した際も同じように1つのデータが取得できる。
(例 item.title => "テストタイトル")
・ターミナル・サーバーを再起動( 変化なし )
・引数エラーということで構文の書き方を検索
構文に則り記述したところ、文法エラーになる
('画像ファイルのパス'ではないことが構文の条件と合わなかったと推測)
<%= image_tag( '画像ファイルのパス', [, オプション or HTML属性 or イベント属性] ) %>
<%= image_tag (item.image, [,class: "item-img"] %>
解決方法
①ターミナル (cd で自分のアプリケーションに移動する)
cd 自分のアプリケーション名
②ターミナル データベースの中身をリセットする
rails db:migrate:reset
【 エラーの理由 】
itemモデルでは タイトル、商品説明、価格、画像を保存していたが、
空白では投稿できないというバリデーションを行う前だったため、
保存の時点で画像のみ「空白」で保存されていたものが存在していた。
Item.allで取得していた データカラムの情報の中で、空白(nil)の画像が存在していたため、
each文で取り出せなくなっていたことが原因だった。
そのため、データベースの中身を②のコマンドでリセットし、再度空白がないように
データを保存したことで表示されるようになった。
補足
rails db:migrate:reset ではデータの中身を消去するだけで、モデル自体が削除されることはない
まとめ
自分で試したことをまとめていた時に、空白で保存できてしまった画像があることに気づきました。
「nil」が出た場合はデータの中身で保存されていない項目を確認するようにしていきたいと思います!