0
1

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.

いろいろな豆知識カレンダーAdvent Calendar 2022

Day 4

【Rails】超簡単!画像のPlaceholder設定方法

Last updated at Posted at 2021-08-28

#爆速!!!画像投稿機能のプレースホルダー設定方法
rails でのwebアプリケーション開発で、画像投稿機能を実装した際に、画像がある場合とない場合の設定方法を今回は使えるととっても便利な「Helper」というものを使って実装していきます。

Helperとは?という人はこちらを見てみてください

###前提
テーブル作成→新規投稿機能が実装済み
また、画像投稿機能を実装済み(carrie waveを中の人は使用しています)
【今回の記事について】
テーブル名:posts
画像を保存するカラム名:image

##STEP1
まずは適当に画像を投稿していない場合に表示させたい画像をダウンロードし、
「app/assets/images」 の中に入れましょう。
*この作業を忘れてエラーになることが多々見受けられるので要注意。

今回は画像名を「placeholder.png」として保存しています。
初心者などの方は、画像を左クリック→「Rename」→「placeholder.png」などと変更しましょう。

##STEP2

次にヘルパーを開いて記述していきます。
場所は「app/helpers」の中にあります。
今回は「posts_helper.rb」を編集していきます。
*viewファイルで使用するコントローラーに準じたものを利用してください。

posts_helper.rb
  def set_image(post)
      if post.image.present?
        post.image_url
      else
        "placeholder.png"
      end
  end

postを引数として、
もし、imageカラムに値があれば、その画像を。
なければ、STEP1で保存した画像
を返します。

##STEP3

実際に使ってみましょう。

一覧表示バージョンと詳細表示バージョンの例を今回は記載しようと思います。

posts_controller.rb
  def index
      @posts= Post.all
  end
    
  def show
      @post = Post.find(params[:id])
  end

posts/index.html.erb
   <% @posts.each do |t| %>
    :
    : 省略
    :
    <%= image_tag set_image(t) %>
    :
    : 省略
    :
  <% end %>
posts/show.html.erb
    :
    : 省略
    :
    <%= image_tag set_image(@post) %>
    :
    : 省略
    :

このように imageカラムを持つレコードを引数にセットするのがポイントです。

##番外編

ユーザーのプロフィール画像機能をつけた人も同様にできるのでやってみてください。

GeekSalon

0
1
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
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?