@Taka4xvposted at 2022-06-03

Rails 画像アップロード表示について

Q&A

解決したいこと

Ruby on Railsでのような予約システムWebアプリを作っています。
ユーザー情報を変更する画面、その他の画面ヘッダーにユーザーが設定したアイコンを表示する機能の実装をしたいです。
解決方法を教えて下さい。
Ver
rails 5.2.8

gem
carrierwave
mini_magick
を使用しています

発生している問題・エラー

赤丸部分にアイコン表示したいのですが、うまく動作しません

該当するソースコード

View

  <h3>アカウント</h3>

<div id="tabs">
  <ul>
    <li><a href="#tabs-account">アカウント</a></li>
    <li><a href="#tabs-profile">プロフィール</a></li>
  </ul>
  <div id="tabs-account">
    <%= form_with model: @user do |edit| %>
        <div>
            <%=edit.label :email ,"メールアドレス" %>
            <%= edit.email_field :email , placeholder: "メールアドレスを入力" %>
        </div>
        <div>
            <%=edit.label :password ,"変更後パスワード（変更する場合のみ入力）" %>
            <%= edit.password_field :password , placeholder: "変更する場合は入力" %>
        </div>
        <div>
            <%=edit.label :password ,"パスワード確認用（変更する場合のみ入力）" %>
            <%= edit.password_field :password , placeholder: "変更する場合は入力" %>
        </div>
        <div>
            <%=edit.label :password  ,"現在のパスワード" %>
            <%= edit.password_field :password, placeholder: "現在のパスワードを入力" %>
        </div>


  </div>
  <div id="tabs-profile">

        <div>
            <!--<A%= image_tag @user.avatar_url.thumb.url %>-->
            <%= image_tag user.avatar if @user.avatar_url.present? %>
            <%= edit.label :avatar_url  ,"アイコン " %><span>必須</span>
            <%= edit.file_field :avatar_url, placeholder: "アイコン" %>
        </div>
        <div>
            <%= edit.label :user_name  ,"名前 " %><span>必須</span>
            <%= edit.text_field :user_name, placeholder: "名前を入力" %>
        </div>
        <div>
            <%= edit.label :introduction  ,"自己紹介 " %><span>必須</span>
            <%= edit.text_area :introduction, placeholder: "自己紹介を入力" %>
        </div>
        
        <div>
            <ul>
                <li><%= edit.submit "更新"%></li>
                <li><%= link_to "戻る", :user %></li>
            </ul>
        </div>
    <% end %>
  </div>
</div>

View(application.html)

<!DOCTYPE html>
<html>
  <head>
    <title>Reserve</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    
  </head>

  <body>
    <header class="Header">
      <div class="Header_Container">
        <!--logo-->
        <div class="Header_logo"><%= link_to image_tag("logo.png"), homes_main_path %></div>
        <!--header-menu-->
        <nav class="HeaderNav">
          <input type="search" name="search" placeholder="キーワードを入力">
          <input type="search" name="search" placeholder="キーワードを入力">
        </nav>
        <div class= "Header_Userinfo">
          <% if user_signed_in? %>
            <div class = "menu-list">
              <label id="user-name"><%= current_user.user_name %></label>
              <label for="toggle" onclick=""  for="menuToggle"><%= current_user.avatar_url %></label>  
                <input type="checkbox" id="toggle" autocomplete="off">
                <ul id="menu">  
                  <li class="gnavi__list"><%= link_to "ルーム登録", new_hotel_path %></li>
                  <li class="gnavi__list"><%= link_to "予約ルーム一覧", hotels_path %></li>
                  <li class="gnavi__list"><%= link_to "登録ルーム一覧", hotels_path %></li>
                  <li class="gnavi__list"><%= link_to "設定", edit_user_path(current_user.id) %></li>
                  <li class="gnavi__list"><%= link_to "ログアウト", destroy_user_session_path, method: :delete %></li>
                </ul>
              </div>
            <% else %>
              <div class="Header_buttons" id="Login"><%= link_to "ログイン", new_user_session_path %></div>
              <div class="Header_buttons" id="Register"><%= link_to "登録する", :new_user %></div>
          <% end %>
        </div>
      </div>
    </header>
    <main>
      <div class="container">
        <p class="notice"><%= notice %></p>
        <p class="alert"><%= alert %></p>
      </div>
      <%= yield %>
    </main>
    <footer>
      <p>© 2022 Taka.</p>
    </footer>
  </body>
</html>

image_uploader

class ImageUploader < CarrierWave::Uploader::Base
  # Include RMagick or MiniMagick support:
  # include CarrierWave::RMagick
  # include CarrierWave::MiniMagick

  # Choose what kind of storage to use for this uploader:
  storage :file
  # storage :fog

  # Override the directory where uploaded files will be stored.
  # This is a sensible default for uploaders that are meant to be mounted:
  # def store_dir
  #   "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  # end
  # #リサイズ、画像形式を変更に必要
    include CarrierWave::MiniMagick
  
  # #上限変更
  #   process :resize_to_limit => [700, 700]
  
  # #JPGで保存
  #   process :convert => 'jpg'
  
  # #サムネイルを生成
    version :thumb do
      process :resize_to_limit => [300, 300]
    end

Controller

  def edit
    @user = User.find(params[:id])
  end

  def update
    @user = User.find(params[:id])
    if @user.update(params.require(:user).permit(:user_name, :email, :password, :introduction, :avatar_url))
      flash[:notice] = "スケジュールIDが｛#{@user.id}｝の情報を更新しました"
      redirect_to :users
    else
      render "edit"
    end
    
  end

自分で試したこと

https://universato.hatenablog.com/entry/2021/07/12/224132
上記のサイトを見て、
Viewの　image_tag @user.avatar_url.thumb.url　を　
image_tag user.avatar if @user.avatar_url.present?
に変更しましたが変わらず、
https://qiita.com/uchida0331/items/f99aba46fd1a6df9e753
上記のサイトを見て、
uploadder設定を変更してみても変わらなかったです。

不足情報等ありましたら提示しますのでよろしくお願いします。

0 likes

Are you sure you want to delete the question?