在 rails 中创建指向 assets 文件夹的链接答案

【问题标题】：making a link to the assets folder in rails在 rails 中创建指向 assets 文件夹的链接
【发布时间】：2013-06-10 13:37:09
【问题描述】：

想知道如何克服这个问题。在我的 Rails 应用程序的主页上，我有一个图像滑块：

  <div id = "carousel">
    <img id ="rotate_images" src="assets/1.1.png"/>

    <div id = "back">
    <img src = "assets/arrow_back.png">
  </div>  

    <div id = "forward">
    <img src = "assets/arrow_forward.png"></div>
  </div>

图像正确显示。然后，在同一个应用程序的另一个页面上，当我粘贴相同的代码时，图像没有显示出来。在控制台中我得到：

GET http://localhost:3000/users/assets/1.1.png 404 (Not Found)

我相信您已经知道，资产文件夹不在“用户”文件夹中，而是在“应用”文件夹中。我认为制作像 src ="../assets/..etc" 这样的链接会做到这一点，但不是那么幸运。我会使用 Rails 代码，例如：

 <%= image_tag("arrow_forward.png") %>

但这只会让人头疼，因为我正在使用与我的 img src 属性匹配的 jQuery 代码。如果有任何用处，这里是 jQuery 代码。如果可以修改它以与 Rails image_tag 方式挂钩，那就太好了，但我真的很好奇为什么没有正确找到资产文件夹。感谢您的帮助。

  <script>

  $('#back').on({
      'click': function () {
          var origsrc = $(rotate_images).attr('src');
          var src = '';
          if (origsrc == 'assets/3.1.png') src = 'assets/2.1.png';
          if (origsrc == 'assets/2.1.png') src = 'assets/1.1.png';
          if (origsrc == 'assets/1.1.png') src = 'assets/1.1.png';
          $(rotate_images).attr('src', src);
      }
  });

  $('#forward').on({
      'click': function () {
          var origsrc = $(rotate_images).attr('src');
          var src = '';
          if (origsrc == 'assets/1.1.png') src = 'assets/2.1.png';
          if (origsrc == 'assets/2.1.png') src = 'assets/3.1.png';
          if (origsrc == 'assets/3.1.png') src = 'assets/3.1.png';
          $(rotate_images).attr('src', src);
      }
  });
  </script>

【问题讨论】：

标签： jquery ruby-on-rails asset-pipeline

【解决方案1】：

这里有几个选项...

我假设您正在运行 rails 3。我认为当您在生产中运行资产管道时，您将获得已消化和未消化的资产 (image-HASHDIGEST.png)。所以在你的视图代码中使用asset-helper并在你的javascript中硬编码路径应该是安全的。

由于您指的是<script> 标签中的代码，我假设这也是来自您的视图的一些代码，因此您也应该能够在其中使用 erb 语法。

使用资产管道时，您还可以使用 erb 预处理您的 javascript。这通常通过将 .erb 附加到文件 (some.js.erb) 来完成，然后在其中也使用asset-helper。这可能是最干净的解决方案。

尽管如此，我认为资产管道很糟糕，因为它为 Rails 引入了一个全新的复杂程度，这对于大多数应用程序来说是压倒性的并且过度设计。

【讨论】：