Step.11 加上圖片 - Azraeil/JCcart_Note GitHub Wiki

fix admin/items/edit.html.erb

fix app/views/dashboard/admin/items/edit.html.erb

<h1>Editing Item</h1>

<%= form_for @item, :url => dashboard_admin_item_path, method: :patch  do |f| %>
  名稱： <%= f.text_field :name %><br>
  價格： <%= f.number_field :price %><br>
  圖片： <%= f.file_field :cover %><br>
  <button type="submit" >送出</button>
<% end %>

fix admin/items/index.html.erb

為了讓圖片顯示出來，列表下也有必要有圖片

fix app/views/dashboard/admin/items/index.html.erb

<h1>產品列表</h1>

<table>
  <thead>
    <tr>
      <th>id</th>
      <th>圖片</th>
      ...
      ...
    </tr>
  </thead>

  <tbody>
    <% @items.each do |item| %>
      <tr>
        <td><%= item.id %></td>
        <td><%= image_tag item.cover.url(:icon) %></td>
        ...
        ...
        ...
      </tr>
    <% end %>
  </tbody>
</table>

設定missing.jpg

然後重整localhost:3000/dashboard/admin/items，我們可以看到index view裡所有圖片都是missing，我們用chrome工具檢查元素，可以看到預設是使用/images/icon/missing.png

<img src="/images/icon/missing.png" alt="Missing">

所以我們去辜狗找一張圖片來放吧，我使用的是icon-question這張圖片

先創建資料夾，create jccart/public/images/icon

然後把剛剛抓的圖片放到這資料夾下，並且改名為missing.png

jccart/public/images/icon

mv icon-question.png missing.jpg

fix iterm model 來改變圖片設定

現在我們把icon設定成jpg檔，可是我們剛剛用chrome工具查到的是使用png檔，我們可以去iterm model改他

fix app/models/iterm.rb

class Item < ActiveRecord::Base
  belongs_to :cate

  has_attached_file :cover,
      styles: {
        original: "1024x1024>",
        cover: "300x300>",
        icon: "150x150#"
      },  #style很重要，取決於你要幾張圖片
      default_url: "/images/missing.jpg"
  validates_attachment_content_type :cover, content_type: /\Aimage\/.*\z/
end

原本的default_url如下

default_url: "/images/:style/missing.jpg"

這樣的寫法是從style裡取icon

現在我們把它拿掉變成

default_url: "/images/missing.jpg"

所以我們也要把missing.jpg他的路徑從public/images/icon/missing.jpg改成public/images/missing.jpg，然後再重整localhost:3000/dashboard/admin/items，我們的圖片就能work了

在view裡設定圖片大小

由於我一開始找的圖片就是150x150沒法體會到太大張的困擾，所以我們來找第二張圖片玩玩吧。我找了一個200x200的X圖片，然後命名為missing2.jpg

一樣去改app/models/iterm.rb，改成efault_url: "/images/missing2.jpg"，然後再重整localhost:3000/dashboard/admin/items，可以明顯感受到他圖片變大了

接著我們去修改app/views/dashboard/admin/items/index.html.erb

<tbody>
  <% @items.each do |item| %>
    <tr>
      <td><%= item.id %></td>
      <td><%= image_tag item.cover.url(:icon), :width => 150, :height => 150 %></td>
      ...
      ...
</tbody>

再重整localhost:3000/dashboard/admin/items，圖片順利變小

測試上傳圖片

在index view下，隨意點選一筆資料按下編輯，然後上傳圖片，確定能work。

⚠️ **GitHub.com Fallback** ⚠️