【解決策】<%= image_tag モデル名.image %>でビューに表示されない / Rails / アクティブストレージ使用 / アソシエーション済


<!-- wp:paragraph -->
<p>今回は以下のエラーに出会った際の解決策をご紹介します。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Ruby on Rails </strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:sgb/box {"boxClassName":"box2","blockId":"id-622c866d-e004-45b9-8c6b-4f2f4f0a9980"} -->
<div class="wp-block-sgb-box sng-box box2"><!-- wp:paragraph -->
<p>アクティブストレージを使用して itemモデルとアソシエーションを行ったが、</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&lt;%= image_tag item.image %>という記述でビューで表示されない</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></div>
<!-- /wp:sgb/box -->

<!-- wp:heading {"level":3} -->
<h3>最終的なゴール</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><br>&lt;%= image_tag item.image %>という記述を使用して、</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>index.html.erb(ビュー)に画像を一覧で表示させたい</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2> 現在の状況</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p> </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>・Railsを使用<br>・アクティブストレージGemを導入・正しくアソシエーション済</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>・アクティブストレージで投稿した画像はデータベースに保存されている<br>・モデルの名前は「item」<br>・データベースに保存した画像を一覧で表示するためにeach文を使用</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":5} -->
<h5><strong><span class="keiko_red">コントローラー　indexアクション</span></strong></h5>
<!-- /wp:heading -->

<!-- wp:code -->
<pre class="wp-block-code"><code>  def index
    @items = Item.all.order('created_at DESC')
  end</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Item.all → itemモデルの中のデータを全て取得するよう指定している</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>order('created_at DESC') → データの中身の順番を指定している</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>@items → インスタンス変数（@items）に 、＝右記（itemモデルの全てのデータ）を指定することでビューで使用できるようになる</p>
<!-- /wp:paragraph -->

<!-- wp:sgb/sen {"blockId":"id-undefined"} -->
<hr class="wp-block-sgb-sen"/>
<!-- /wp:sgb/sen -->

<!-- wp:heading {"level":5} -->
<h5><span class="keiko_red">indexのビュー</span></h5>
<!-- /wp:heading -->

<!-- wp:code -->
<pre class="wp-block-code"><code> &lt;% @items.each do | item |%&gt;
 　　　&lt;%= image_tag item.image, class: "item-img" %&gt;
&lt;% end %&gt;</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>&lt;% インスタンス変数（@items）.each do | ブロック変数 |%>  　</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&lt;% end %> → インスタンス変数内のデータを１つずつ取り出すことができるようになる</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong><span class="keiko_red">・・itemモデルの全てのデータを一覧表示することができる！</span></strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p> </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p> </p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>発生している問題・エラー</h3>
<!-- /wp:heading -->

<!-- wp:code -->
<pre class="wp-block-code"><code>ArgumentError in Items#index
Can't resolve image into URL: to_model delegated to attachment, but attachment is nil</code></pre>
<!-- /wp:code -->

<!-- wp:heading {"level":3} -->
<h3>翻訳</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>引数のエラー<br>画像をURLに解決できません：to_modelは添付ファイルに委任されていますが、添付ファイルはnilです</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>自分で試したこと</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>エラー画面のコンソールにて「item.image」の中身を確認</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>&gt;&gt; item.image
=&gt; #&lt;ActiveStorage::Attached::One:0x00007fd4aa8ce228 @name="image", @record=#&lt;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"&gt;&gt;</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>・アクティブストレージを使用して投稿した画像のデータは取得できている<br>・each文を使用して、他のデータを取得した際も同じように１つのデータが取得できる。<br>（例　item.title　＝＞　"テストタイトル"）</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>・ターミナル・サーバーを再起動( 変化なし )</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>・引数エラーということで構文の書き方を検索<br>構文に則り記述したところ、文法エラーになる<br>（'画像ファイルのパス'ではないことが構文の条件と合わなかったと推測）</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>&lt;%= image_tag( '画像ファイルのパス', &#91;, オプション or HTML属性 or イベント属性] ) %&gt;
　&lt;%= image_tag （item.image, &#91;,class: "item-img"] %&gt;</code></pre>
<!-- /wp:code -->

<!-- wp:heading -->
<h2>解決方法</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p> </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>①ターミナル　（cd で自分のアプリケーションに移動する）</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>cd 自分のアプリケーション名</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>②ターミナル　データベースの中身をリセットする</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>rails db:migrate:reset</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p> </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><span class="keiko_red">【　　エラーの理由　　】</span></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p> <br>itemモデルでは　タイトル、商品説明、価格、画像を保存していたが、<br>空白では投稿できないというバリデーションを行う前だったため、<br>保存の時点で画像のみ「空白」で保存されていたものが存在していた。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Item.allで取得していた　データカラムの情報の中で、空白（nil）の画像が存在していたため、<br>each文で取り出せなくなっていたことが原因だった。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>そのため、データベースの中身を②のコマンドでリセットし、再度空白がないように<br>データを保存したことで表示されるようになった。</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4>補足</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>rails db:migrate:reset　ではデータの中身を消去するだけで、モデル自体が削除されることはない</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>まとめ</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p> </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>自分で試したことをまとめていた時に、空白で保存できてしまった画像があることに気づきました。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>「nil」が出た場合はデータの中身で保存されていない項目を確認するようにしていきたいと思います！</p>
<!-- /wp:paragraph -->