html内の画像指定のやり方がなぜこうなるか理解できない

Question

プログラミング学習サイトで勉強中です！よく意味が理解できない文法があったので、質問しています。

class UsersController < ApplicationController

  def index
    @users = User.all
  end
  
  def show
    @user = User.find_by(id: params[:id])
  end
end

---

show.html

<div class="main user-show">
  <div class="container">
    <div class="user">
      <!-- <img>タグを用いて、プロフィール画像を表示してください -->
      <img src = "<%=" /user_images/#{@user.image_name}"%>">
      <h2><%= @user.name %></h2>
      <p><%= @user.email %></p>
      <%= link_to("編集", "/users/#{@user.id}/edit") %>
    </div>
  </div>
</div>

---

index.html

<div class="main users-index">
  <div class="container">
    <h1 class="users-heading">ユーザー一覧</h1>
    <% @users.each do |user| %>
      <div class="users-index-item">
       <div class="user-left">
      <img src = "<%=" /user_images/#{user.image_name}"%>">
        </div> 
        <div class="user-right">
          <%= link_to(user.name, "/users/#{user.id}") %>
        </div>
      </div>
    <% end %>
  </div>
</div>

indexの <img src = "<%=" /user_images/#{user.image_name}"%>">
の#{user.image_name}が意味がよくわかりません。
show.htmlみたいに#{@user.image_name}を使いたくて、コントローラに @user = User.find_by(id: params[:id])を書いたらブラウザに正しく表示されず、答えを見たら<img src = "<%=" /user_images/#{user.image_name}"%>">が書かれていました。私はよく理解できません。なぜこのように書いて成立するのか教えてください。

Answer 1

indexアクションでは、複数個のUserを扱うので、@usersという複数形の名前になった変数に、複数のUserが入っています。そして、@users.each do |user|で、1つずつuserに取り出しています。

---

Railsでは、<%= ... %>の中身だけが処理されて、<img src="/user_images/（名前）">のようなHTMLを生成します。そして、それがHTMLとしてブラウザに解釈されます。

もっとも、このようにHTMLの一部にRailsから値を入れるのは、XSSの危険などもあるので、おすすめできません。image_tagのようなヘルパーを使いましょう。

<%= image_tag "/user_images/#{@user.image_name}" %>

Comments

[退会済みユーザー]

なるほど！！！
スッキリできました！！
今までなんとなく、each文を書いていたので、maisumakunさんの回答で理解できた気がします！

なるほど。そうなんですね。自分で作る時はimage_tagを使って見ます！

[maisumakun]

Railsの場合、単数形複数形の違いにもきっちり意味がありますので、しっかり把握していきましょう（例えば、モデルクラスは単数形なのに対して、テーブル名やコントローラー名は複数形です）。

[退会済みユーザー]

それも謎なんですよね〜。笑

ブログとか読んでると、わからないところは飛ばしたほうが良いと書いてあるので、できるだけ飛ばしてます。笑