前置作業：在商品的 model 設定 Active Storage / 上傳圖片

我們上次介紹了 Active Storage

但還沒介紹到該怎麼把他顯示出來

商品頁面加上圖片應該會更吸引人

我們就把商品頁面的 Banner 放置成商品圖片吧！

前置作業都完成後，我們就可以來設定了

顯示圖片

step 1. 查看該資料是否有圖片

如果要在前台顯示圖片，我們可以先去判斷這筆記錄有沒有圖片，有的話才顯示

<div>
  <% if @drink.pictures.attached? %>
    ....
  <% end %>
</div>

step 2. 顯示圖片

如果有多張，就必須用下列方法

<div>
  <% if @drink.pictures.attached? %>
    <% @drink.pictures.each do |picture| %>
      <%= image_tag picture.variant(resize_to_limit: [100, 100]) %>
    <% end %>
  <% end %>
</div>

如果只有一張，就用下列寫法

<div>
  <% if @drink.picture.attached? %>
     <%= image_tag picture.variant(resize_to_limit: [100, 100]) %>
  <% end %>
</div>

接下來在畫面應該就會看到了

更新圖片

有發現我們要更新圖片的時候，他會顯示未選擇任何檔案嗎？

未選擇任何檔案這個字樣必須要用 JS 改掉

但如果要出現之前已經上傳過的圖片，我們可以用 representation 來做

<% if @drink.pictures.attached? %>
  <% @drink.pictures.each do |picture| %>
    <%= image_tag picture.representation(resize_to_limit: [100, 100]) %>
  <% end %>
<% end %>

如果只有一張的話只要

<%= image_tag @drink.picture.representation(resize_to_limit: [100, 100]) %>

刪除圖片

如果要刪除圖片呢？

當我們設定好刪除按鈕(request action 以及 path)，

就可以在對應的 controller 中寫以下語法來達成刪除的動作

@drink.picture.purge