0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

attached?を使って、プロフィール画像を区別する

Posted at

#はじめに

新規登録の際にプロフィール画像を登録するように設定しました。

しかし写真なんて載せられないユーザーもいると思うのでバリデーションをかけませんでした。

なので投稿した際にプロフィール画像がある人は画像は表示され、ない人はこちらで用意した画像が表示されるようにしたいと思います。

#前提

user.rb
class User < ApplicationRecord
has_one_attached :avatar

  with_options presence: true do
    #バリデーション省略
  end

end

今回はuserモデルにavatarというファイル名をつけました。

review.rb
class Review < ApplicationRecord
 belongs_to :user
  

  with_options presence: true do
   #バリデーション省略
  end
end

スクリーンショット 2021-07-13 19.13.31(2).png

このような形で新規登録画面に画像を登録してもらうようにします。

default-icon.png

この画像をあらかじめapp>asset>images>default-icon.pngとして入れておきました。

#新規登録の際に保存した画像を表示

保存した画像をブラウザ上で表示させるために、ビューファイルに画像を表示させるコードを記述します。

表示させるためにimage_tagメソッドを使用します。

image_tagメソッドでは、複雑なRailsのディレクトリパスを指定しなくても、モデルから画像ファイルを呼び出して引数に記述するだけで、画像を表示するimg要素を生成します。

<%= image_tag モデル.画像ファイル %>
<%= image_tag user.avatar %>

ファイルからの呼び出しの場合
app/assets/ディレクトリ下の画像ファイルパスでも指定できる
<%= image_tag 画像ファイルのパス %>
<%= image_tag "default-icon.png" %>

あとは条件分岐で画像がある時、画像がないときの記述が必要です。

#attached?メソッド

レコードにファイルが添付されているかどうかで、trueかfalseを返すメソッドです。

<%if review.user.avatar.attached?%>
   画像があった場合はこっちの記述
    <%else%>
   画像がない場合がこっちの記述
<%end%>
.erb
<%if review.user.avatar.attached?%>
     <%= image_tag user.avatar %>
    <%else%>
     <%= image_tag "default-icon.png" %>
<%end%>

このような記述になります。

よくプロフィール画像をクリックしたらプロフィールに遷移する事ができますがその場合は下記になります。

<%if review.user.avatar.attached?%>
    <%=link_to (image_tag review.user.avatar, class: "user-img"), "#" %>
  <%else%>
    <%=link_to (image_tag 'default-icon.png' , class: "user-img"), "#" %>
<%end%>
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?