前提・実現したいこと
こんばんは。
現在、アプリケーションにて複数枚画像の投稿機能を実装しています。
仕様としては、投稿時に複数枚画像を投稿することができる⇨トップページでは複数投稿した画像の一枚が表示される⇨詳細ページでは一つの投稿に紐づく全ての写真が表示されるようにしたいです。
アソシエーション・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/ツールのバージョンなど) ここにより詳細な情報を記載してください。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/10/24 03:23