最近在專案上碰到了要修改前端的部分，
原本以為只是將圖片更新，應該不是件困難的事，
沒想到阿菜如我，真的連圖片更新這件事都做不起來...？

事情是這樣，
我在本機端測試都正常後，把更新後的專案部署上遠端測試機，
結果在測試機器上面居然發現我的圖片都顯示不出來，
看著自己本機端卻正常，到底發生了什麼事？

首先，你可以先到 config/application.rb 中

config.assets.enabled = true

把這行從true改成false
好了，這樣你就可以直接上一頁跳過這篇了～（喂！）

回歸正題
我們可能會需要先了解Asset pipeline到底是什麼鬼東西

Asset Pipline 提供了一個框架，用於連結、壓縮 JS 和 CSS 文件，還允許使用其他語言和預處理器編寫 JS 和 CSS 例如 CoffeeScript、Sass 和 ERB

Assets指的是JavaScript、Stylesheets和圖檔等靜態檔案，這些檔案並不會隨Requests不同而有所不同。而在Rails目錄中，只有public這個目錄是公開讀取的，所以通常我們會將靜態檔案都放在public這個目錄下，好讓瀏覽器可以直接讀取。但是隨著JavaScript和Stylesheet檔案越來越多時，如何管理這些檔案變為一項議題，為了加快瀏覽器的下載速度，我們會合併JavaScript和Stylesheet檔案，來減少瀏覽器Request下載次數。

看不懂也沒關係，總而言之看起來這傢伙是來幫我們將專案內的靜態資源打包壓縮（像是圖檔、JS、CSS）
來增加瀏覽器的存取速度，此外原本會將靜態檔案丟到public資料夾中，我們也能開始為這些檔案做出區隔跟整理。
那到底 Asset pipeline 做了什麼？
其實就在 app/assets/stylesheets 這個資料夾裡頭有兩個很重要的檔案
application.css & appication.js
這裡必須要註明一下，可能有些人會想說為什麼沒看到application.js這個檔案
如果你是使用 Rails 6.0 以上的版本，
那麼application.js檔案則會出現 app/assets/javascript/packs 這個資料夾中
再來看看這兩個檔案，點開來可能滿頭問號，一堆註解
其實上面說將靜態資源打包壓縮出來的就是指上面這兩個檔案，也就是 Asset pipeline 替我們做的事。
那打包了總有地方用上吧？
我們可以看看在 View 中的 layout/application.html.erb 這個檔案

<%= stylesheet_link_tag 'application' %>
<%= javascript_pack_tag 'application' %>

因為 Asset pipeline 已經替我們打包好了，
而我們所需要做的也就是載入這兩個檔案就大功告成啦！
Asset pipeline要講完整的話篇幅很長，
底下會分享參考資料，有興趣的朋友可以直接去網站上詳讀～

這裡的主題就是會針對 image 圖檔的部分來做處理
前面引用文字也有提到所謂預處理，
也就是 Assets 資料夾下 Rails 支援不同使用的語法：
而這裡會帶到的則是 Sass 語法中的 scss 形式。

放在app/assets/images下的圖片該怎麼使用呢？在實際佈署後，Rails會將檔案名稱加以編碼

實務上使用也有針對不同的情況下，而使用不同的方法來對應：
在一般 View 的檔案中，
我們可以使用image_tag這個 helper 來指向我們的圖檔

<%= image_tag('apple.jpg') %>

另外在 css 的情況下稍微複雜一些些，
如果檔案的類型為example.css.erb，我們會使用asset_path這個 helper

body {
  background-image: url('<%= asset_path('apple.jpg') %>')
}

如果是比較熟悉的example.scss，則可以使用image_url這個 helper

body {
  background-image: image-url('apple.jpg')
}

說了這麼多，還是得回到使用上發生的情況～
其實我一開始是這麼寫的

body {
  background-image: url('../assets/images/apple.jpg')
}

這裡一開始做的時候，查 css 的語法，都會看到路徑需要寫什麼相對路徑blabla
但我真的這麼寫的時候，反而都無法正常顯示，
後來才發現原來又是 Asset pipeline 做得好事，
也許是因為已經被打包的關係，所以會自動默認到images資料夾底下，
我們只需要直接給檔名，他自然就能幫我們找到了

body {
  background-image: url('apple.jpg')
}

原以為這樣就結束了，但並沒有，
當我 deploy 到遠端測試機的時候，咦，我的圖怎麼又不見了？！
最後則是這麼寫才解決了我的問題：

body {
  background-image: image-url('apple.jpg')
}

老實說我並沒有很清楚為什麼這麼做可以讓遠端機器找得到圖，
我只確定的是image-url這個 helper 他會幫你把圖檔檔名做一串編譯的動作。
希望有大大可以幫我解惑！

參考資料：
Rails實戰聖經
Rails 靜態檔案處理（The AssetPipeline）
一次搞懂 Assets Pipeline