Rails 3.1 和圖像資源

Question

我已將我的管理主題的所有圖像放在名為 admin 的文件夾中的 assets 文件夾中。 然后我像正常一樣鏈接到它，即。

# Ruby    
image_tag "admin/file.jpg" .....
#CSS
.logo{ background:url('/assets/images/admin/logo.png');

供參考。 只是為了測試我還沒有使用asset_path標簽，因為我還沒有編譯我的資產。

好吧，到目前為止一切都很好，直到我決定更新圖像。 我更換了一些 colors 但重新加載時未顯示新樣式的圖像。 如果我直接在瀏覽器中查看圖像，它仍然顯示舊圖像。 更進一步，我銷毀了管理圖像文件夾。 但它沒有破壞所有圖像仍在顯示。 是的，我已經清除了緩存並嘗試了多個瀏覽器。

是否正在進行某種圖像緩存？ 這只是使用 pow 服務頁面的本地開發。

即使破壞了整個圖像文件夾，圖像仍然被提供。

我錯過了什么嗎？

Answer 1

在 3.1 中，您只需去掉路徑的“圖像”部分。 因此，位於/assets/images/example.png中的圖像實際上可以在此 url - /assets/example.png的獲取請求中訪問

因為assets/images文件夾是與新的 3.1 應用程序一起生成的，所以這是他們可能希望您遵循的約定。 我認為那是image_tag會尋找它的地方，但我還沒有測試過。

另外，在 RailsConf 主題演講中，我記得 D2h 說public folder不應該再有太多內容了，主要是錯誤頁面和網站圖標。

Answer 2

您需要將 css 文件的擴展名從.css.scss為.css.scss.erb並執行以下操作：

background-image:url(<%=asset_path "admin/logo.png"%>);

您可能需要執行“硬刷新”才能查看更改。 OSX 瀏覽器上的 CMD+SHIFT+R。

在生產中，確保

rm -rf public/assets    
bundle exec rake assets:precompile RAILS_ENV=production

在部署時發生。

Answer 3

對於它的價值，當我這樣做時，我發現 css 文件的路徑中不應包含任何文件夾。 例如，如果我有app/assets/images/example.png ，我把它放在我的 css 文件中......

div.example { background: url('example.png'); }

...然后不知何故它神奇地起作用。 我通過運行rake assets:precompile任務解決了這個問題，它只是從所有加載路徑中吸取所有內容並將其轉儲到垃圾抽屜文件夾中： public/assets 。 諷刺的是，IMO...

在任何情況下，這意味着您不需要放置任何文件夾路徑，資產文件夾中的所有內容最終都將存在於一個巨大的目錄中。 該系統如何解決文件名沖突尚不清楚，您可能需要注意這一點。

有點令人沮喪的是，沒有更好的文檔來應對這么大的變化。

Answer 4

在 rails 4 中，您現在可以使用 css 和 sass 幫助程序圖像網址：

div.logo {background-image: image-url("logo.png");}

如果您的背景圖像沒有出現，請考慮查看您在樣式表中如何引用它們。

Answer 5

在 CSS 或 IMG 標簽中引用圖像時，使用 image-name.jpg

而圖像實際上位於 ./assets/images/image-name.jpg 下

Answer 6

http://railscasts.com/episodes/279-understanding-the-asset-pipeline

這個 railscast（關於資產管道的 Rails 教程視頻）也有助於解釋資產管道中的路徑。 覺得挺好用的，看了好幾遍。

我選擇的解決方案是上面的@Lee McAlilly，但是這個 railscast 幫助我理解了它的工作原理。 希望能幫助到你！

Answer 7

rails 中的資產管道為這個確切的事情提供了一種方法。

您只需將 image_path('image filename') 添加到 css 或 scss 文件中，rails 會處理一切。 例如：

.logo{ background:url(image_path('admin/logo.png'));

（請注意，它就像在 a.erb 視圖中一樣工作，並且您不要在路徑中使用“/assets”或“/assets/images”）

Rails 還提供了其他輔助方法，這里還有另一個答案： How do I use reference images in Sass when using Rails 3.1?