在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>