複数枚画像の投稿機能でNameErrorが出力され、困っています。

前提・実現したいこと

こんばんは。
現在、アプリケーションにて複数枚画像の投稿機能を実装しています。
仕様としては、投稿時に複数枚画像を投稿することができる⇨トップページでは複数投稿した画像の一枚が表示される⇨詳細ページでは一つの投稿に紐づく全ての写真が表示されるようにしたいです。

アソシエーション・file_fieldのname属性・ストロングパラメーター・それぞれのビューファイルの記述が完了した為、jsファイル記述する前に一旦エラーが出力されないか挙動の確認を行ったところ
NameError in Recipes#newが出力されて困っています。

解決方法がお分かりになる方がいらっしゃいましたら、ご教授お願い致します。

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

ターミナル

ActionView::Template::Error (undefined local variable or method `image' for #<#<Class:0x00007fb6fcdb4a38>:0x00007fb6fcdbf0c8>
Did you mean?  image_url):

該当のソースコード

recipes_controller

class RecipesController < ApplicationController

  def index
    @recipes = Recipe.order('created_at DESC')
  end

  def new
    @recipe = RecipesTag.new
  end

~~~省略~~~
  private

  def recipe_params
    params.require(:recipes_tag).permit(:title, :material, :text, :category_id, :time_require_id, :name, :recipe_id, images: []).merge(user_id: current_user.id)
  end
```models/recipe.rb

class Recipe < ApplicationRecord
extend ActiveHash::Associations::ActiveRecordExtensions
belongs_to :user
belongs_to :category
has_many_attached :images

```
view/index.html.erb
```
<%# レシピ一覧の表示 %>
<div class="recipe__content">
  <div class="subtitle">
  新着レシピ
  </div>
  <div class="recipe-contents">
    <% @recipes.each do |recipe| %>
      <%= render partial:"recipe", locals: {recipe: recipe} %>
    <% end %>
  </div>
</div>
```
views/_recipe.html.erb
```
    <%= link_to recipe_path(recipe.id) do %>
      <div class="list">
        
        <div class="recipe-image-content">
          <% recipe.images.find do |image| %>
            <%= image_tag image, class:'recipe-images' %>
          <% end %>
        </div>
~~~省略~~~
      </div>
    <% end %>
```
views/new.html.erb
```
<div class="main">

  <ul>
    <% @recipe.errors.full_messages.each do |msg| %>
      <li><%= msg %></li>
    <% end %>
  </ul>
  
  <div class="inner">
    <h2 class="new-recipe">新しいレシピを投稿する</h2>
      <%= render partial:"form" %>
  </div>
</div>
```
views/_form.html.erb
(コメントアウト部分は、現在写真が一枚ずつの投稿のためeach文を使用するとエラー出力されるのでコメントアウトしています)
```
<%= form_with model: @recipe, url: recipes_path, local: true do |f| %>

<div class="field_type">

<div class="field">
  <div class="field_image">

    <%= f.label :images, "料理の画像" %><br />
    <%= f.file_field :images, name: 'recipe[images][]', id:"cook_image" %>
      <div id="image-list"></div>

    <%# @recipe.images.each do |image| %>
    <% @recipe.images %>
      <%= image_tag image, class:'images' %>
    <%# end %>

  </div>
</div>
~~~省略~~~
```
javascript/preview.js
```
document.addEventListener('DOMContentLoaded', function (){
  if (document.getElementById('cook_image')){
    const ImageList = document.getElementById('image-list');

    const createImageHTML = (blob) => {
      const imageElement = document.createElement('div');
      const blobImage = document.createElement('img');
      blobImage.setAttribute('src', blob);

      imageElement.appendChild(blobImage);
      ImageList.appendChild(imageElement);
    };

    document.getElementById('cook_image').addEventListener('change', function(e){
      //const imageContent = document.querySelector('img');
      //if (imageContent){
        //imageContent.remove();
      //}
      
      const file = e.target.files[0];
      const blob = window.URL.createObjectURL(file);

      createImageHTML(blob);
    });
  }
});
```

### 試したこと
image_urlをどこかに記述しなければいけないようだが、urlは存在しない。。


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

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

行動規範の内容に同意します

回答1件

eachをコメントアウトしたので、image が未定義となり画像のエラーになります。
「imageがひとつなのでeachがエラー」ということはありえません。
エラーになったとすると一つもないものがあり、それが nil だからという可能性が高いですが、その時のエラーメッセージが無いので単なる予想・想像・推定。

投稿2021/10/24 02:42