画像投稿アプリ実装において投稿した画像を表示できるようにしたい。

前提・実現したいこと

Rubyで画像投稿アプリを実装中です。

投稿した情報はDB上に保存は確認できるものの実際に画像の投稿が確認できません。

画像投稿が表示されるようにしたいです。

何か足りない情報等ございましたらご指摘お願いします。

お手数をおかけしますがよろしくお願いいたします。

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

現状エラーは発生していないようです。特にエラー文等は表立って出力されていません。

該当のソースコード

Gemfile


gem 'mini_magick'
gem 'image_processing', '~> 1.2'

_prototypes.html.erb

<div class="card">
  <%= link_to image_tag(prototype.image, class: :card__img ), prototype_path(prototype.id)%>
  <div class="card__body">
    <%= link_to prototype.title, prototype_path(prototype.id), class: :card__title%>
    <p class="card__summary">
      <%= prototype.catch_copy %>
    </p>
     <%= link_to "by #{prototype.user.name}", root_path, class: :card__user %>
  </div>
</div>

_form.html.erb

<%= form_with model: @prototype, local: true do |f|%>
  <div class="field">
    <%= f.label :title, "プロトタイプの名称" %><br />
    <%= f.text_field :title %>
  </div>

  <div class="field">
    <%= f.label :catch_copy, "キャッチコピー" %><br />
    <%= f.text_area :catch_copy, class: :form__text %>
  </div>

  <div class="field">
    <%= f.label :concept, "コンセプト" %><br />
    <%= f.text_area :concept, class: :form__text %>
  </div>

  <div class="field">
    <%= f.label :image, "プロトタイプの画像" %><br />
    <%= f.file_field :image %>
  </div>

  <div class="actions">
    <%= f.submit "保存する", class: :form__btn  %>
  </div>
<% end %>

index.html.erb

<main class="main">
  <div class="inner">
    <%# ログインしているときは以下を表示する %>
     <% if user_signed_in? %>
       <div class="greeting"> 
        <%= "こんにちは、" %>
        <%= link_to "#{current_user.name}さん", user_path(current_user.id), class: :greeting__link%>
       </div> 
      <% end %>
    <%# // ログインしているときは上記を表示する %>
    <div class="card__wrapper">
      <%# 投稿機能実装後、部分テンプレートでプロトタイプ投稿一覧を表示する %>
     <%= render partial: "prototype", collection: @prototypes %>
    </div>
  </div>
</main>

prototypes_controller.rb

class PrototypesController < ApplicationController
  before_action :authenticate_user!, except: [:show, :index]
  before_action :move_to_index, except: [:index, :show]

  def index
    @prototype = Prototype.all
  end

  def new
    @prototype = Prototype.new
  end

  def create
    @prototype = Prototype.new(prototype_params)
    if @prototype.save
      redirect_to root_path
    else
      render :new
   end
  end

  def show
  end

  private

  def prototype_params
    params.require(:prototype).permit(:title, :catch_copy, :concept, :image).merge(user_id: current_user.id)
  end

  def move_to_index
    unless user_signed_in? 
      redirect_to action: :index
    end
  end

end

routes.rb

Rails.application.routes.draw do
  devise_for :users
  root to: "prototypes#index"
  
  resources :prototypes, only: [:index, :new, :create, :destroy, :edit, :update,:show] do
end
resources :users, only: :show
end

試したこと

様々な記事をさまよい、
<%= link_to "by #{prototype.user.name}", root_path, class: :card__user %>
の箇所が違ってる場合が多かったためこのように記述してみましたが特に変化がみられませんでした。

画像表示に関するコードが何か足りないのでしょうか・・・？

m.ts10806

2021/01/03 21:27

Rubyやってる人すべてがRailsやってるわけではないと思うので、Ruby on Railsもタグとして必須に思います。

ERI22649228

2021/01/03 22:12

ご指摘ありがとうございます。早速追記いたしました。

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

回答2件

自己解決

routes.rbの

root to: "prototypes#index"

こちらの記述が間違っていて、正しくは

root to: 'prototypes#index'

こちらでした。
ダブルクォーテーションとシングルクォーテーションの違いでした。
ご回答いただきありがとうございました。

投稿2021/01/06 08:18

ERI22649228

総合スコア0

データの保存場所にもよりますが、基本的にはimage_tagで実装するのが一般的なので、こちらを元にファイル名を@prototype.imageとして実装する形になるかと思います。

参考：https://qiita.com/d0ne1s/items/0af5e99feafd5172d8ce

###app/assets/image/以下の画像

<%= image_tag '<ファイル名>'で指定。
<%= image_tag 'logo.png' %>
またはsrc="/assets/<ファイル名>"で指定
<img src="/assets/logo.png" alt="">

###public/以下の画像
<%= image_tag '<publicディレクトリからの相対パス>'で指定
<%= image_tag '/logo.png' %>

投稿2021/01/03 23:15

no1knows

総合スコア3365

ERI22649228

2021/01/04 01:48

ご回答ありがとうございます。 _prototype.html.erbの <%= link_to "by #{prototype.user.name}", root_path, class: :card__user %> の下へ <%= image_tag'@prototype.image'%> と記述してみましたが表示はされませんでした。また、 <%= image_tag prototype.image, class: 'prototype-image' %> このようにも記述してみましたが特に変わらず・・・。他に考えられる文法ミスや記述漏れ等ありましたらご回答いただけると嬉しいです。後付けで申し訳ありません。 Active Storage、ImageMagick、MiniMagickをインストールし、Gemfileにも記述をしております。これが今回の問題に何か関係していることがあるのでしょうか。。お手数をおかけしますが、ご回答お待ちしております。