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 函数位于 app / assets / plugins / backstretch 中的文件中。

我可以通过更改图像的路径和移动图像来使功能正常工作： -

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

我宁愿不移动图像，因为它们是从很多不同的地方引用的。我已经尝试将脚本中的路径更改为 ./ assets / img / bg / 7.jpg ，但这不起作用。

我似乎对rails中的相对路径有各种各样的问题，因为它似乎应用了它自己的规则。

另一个例子是有一个脚本可以更改主题颜色和图像，但是这个脚本也引用了 img 文件夹。我需要在这里使用相对路径（../assets/img）来引用images文件夹，但相对路径似乎不能正常运行。

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

请试一试。

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

Answer 2

您必须在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')

在Ruby on Rails中引用图像

2 个答案: