Rails5.1 | 09 | Webアプリケーション開発 | 画像を表示する

<<前　 [TOP] 　次>>


Railsでは画像をフォルダに保存して表示させることが出来ます。
保存する場所は「shop」フォルダの中にある「public」フォルダか、「app」の中の「assets」フォルダにある「images」フォルダのどちらかです。


「public」フォルダに画像を保存した場合、「image_url」フィールドに入力するのは画像名のみで良いのです。
例えば「test01.jpg」というファイルなら「image_url」フィールドにはそのまま「test01.jpg」と入力します。


「app/assets/images」フォルダに保存した場合、「image_url」フィールドには「/assets/画像名」と入力します。
例えば「test02.png」というファイルなら「image_url」フィールドには「/assets/test02.png」と入力します。


「app/assets/images」フォルダに保存した方が、表示が早いです。


画像を表示できるように「index.html.erb」ファイルを以下のように編集しました。
【app/views/gods/index.html.erb】

<p id="notice"><%= notice %></p>

<h1>Railsはじめてマート</h1>

<table>
  <thead>
    <tr>
      <th>商品画像</th>
      <th>商品ID</th>
      <th>商品名</th>
      <th>説明</th>
      <th>画像URL</th>
      <th>価格</th>
      <th>登録日</th>
      <th>メーカー</th>
      <th>カテゴリー</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @goods.each do |good| %>
      <tr>
	<td text-align:center;><img height="80" src="<%=h good.image_url %>"/></td>
        <td><%= good.goods_id %></td>
        <td><%= good.title %></td>
        <td><%= good.description %></td>
        <td><%= good.image_url %></td>
        <td><%= good.price %></td>
        <td><%= good.date %></td>
        <td><%= good.maker %></td>
        <td><%= good.category %></td>
        <td><%= link_to '詳細', good, class: 'btn' %></td>
        <td><%= link_to '編集', edit_good_path(good), class: 'btn' %></td>
        <td><%= link_to '削除', good, method: :delete, data: { confirm: '本当に削除してもよろしいですか？' }, class: 'btn' %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to '商品登録', new_good_path, class: 'btn' %>

画像を表示させる部分の記述は以下のところです。

<td text-align:center;><img height="80" src="<%=h good.image_url %>"/></td>

good.image_urlでimage_urlフィールドに入力した値を取り出しています。
「<%=」の後についている「h」は、htmlエスケープといいまして、「<」や「>」のようなものを文字に変換して、htmlを壊さないようにしています。


ではトップページの表示がどのようになったか確認してみます。

↓↓クリックして頂けると励みになります。

<<前　 [TOP] 　次>>