在Ruby on Rails中引用圖像

Question

我在頁面（如下）中有一個腳本，它調用jQuery插件並將路徑傳遞給多個圖像。這些圖像存儲在app/assets/img/bg而不是app/assets/images。

<script> 
    $(".forms-wrapper").backstretch([ 
     "assets/img/bg/6.jpg", 
     "assets/img/bg/5.jpg", 
     "assets/img/bg/7.jpg", 
     ], { 
      fade: 1000, 
      duration: 7000 
     }); 
</script> 

的的JavaScript功能是在位於應用程序/資產/插件/直道文件。

我能得到的功能通過改變路徑，圖像和運動圖像的工作： -

<script> 
    $(".forms-wrapper").backstretch([ 
     "../assets/7.jpg", 
     "../assets/16.jpg", 
     "../assets/19.jpg", 
     ], { 
      fade: 1000, 
      duration: 7000 
     }); 
</script> 

，因爲它們是由很多不同的地方引用我寧願不動的圖像。我試圖將腳本中的路徑更改爲./assets/img/bg/7.jpg，但這不起作用。

我似乎在軌中有相對路徑的各種問題，因爲它似乎應用了它自己的規則。

另一個示例是腳本可以更改主題顏色和圖像，但該腳本也參考了文件夾。我需要使用相對路徑（../assets/img）引用圖像文件夾，但相對路徑看起來並不正確。

var setColor = function (color, data_header) { 
    jQuery('#style_color').attr("href", "assets/css/theme-colors/" + color + ".css"); 
    if(data_header == 'light'){ 
     jQuery('.logo img').attr("src", "assets/img/themes/logo1-" + color + ".png"); 
     jQuery('#logo-footer').attr("src", "assets/img/themes/logo2-" + color + ".png"); 
     jQuery('.navbar-brand img').attr("src", "assets/img/themes/logo1-" + color + ".png"); 
    } else if(data_header == 'dark'){ 
     jQuery('.logo img').attr("src", "assets/img/themes/logo1-" + color + ".png"); 
     jQuery('#logo-footer').attr("src", "assets/img/themes/logo2-" + color + ".png"); 
    } 
} 

如何可靠地解決資產的子目錄以引用圖像？這個問題在應用程序的不同部分以不同的方式表現出來。

謝謝

Answer 1

您必須使用Rails的

$(".forms-wrapper").backstretch([ 
    "<%= image_path('bg/6.jpg') %>", 
    "<%= image_path('bg/7.jpg') %>", 
    "<%= image_path('bg/8.jpg') %>", 
    ], { 
     fade: 1000, 
     duration: 7000 
    }); 

資產傭工這是假設的圖像在app/assets/images/img/bg文件夾中。

一般來說，你在下面app/assets/images路徑發送，這意味着

image_path('logo.png') # references app/assets/images/logo.png 

---

編輯：

如果您需要引用您可以添加這一個非正統的文件夾config/initializers/assets.rb（和重啓）

Rails.application.config.assets.paths << Rails.root.join('assets', 'img') 

Answer 2

請試試這個。

<script> 
    $(".forms-wrapper").backstretch([ 
    "../assets/img/bg/6.jpg", 
    "../assets/img/bg/5.jpg", 
    "../assets/img/bg/7.jpg", 
    ], { 
     fade: 1000, 
     duration: 7000 
    }); 
</script>