使用/不使用 ERB Ruby on Rails 在 JS 中引用图像答案

【问题标题】：Referencing Images in JS with/out ERB Ruby on Rails使用/不使用 ERB Ruby on Rails 在 JS 中引用图像
【发布时间】：2014-09-27 19:04:22
【问题描述】：

我正在使用 jquery.flipbook.js，https://gist.github.com/kgn/719686

并且需要以下代码：

$('img.intro').flipbook({
    'start': 0,
    'end': 137,
    'loop': false,
    'fps': 20,
    'mobileStep': 3,
    'images':"/intro_png/intro-png_.%2d.png" 
   // "url(/assets/intro_png/intro-png_%2d)"
});

上面的%2d 需要迭代到png序列中的下一个图像。我不仅引用了上面的一个文件，还引用了许多（138）个文件。我可以将我的 intro_png 目录与所有 PNGS 放在哪里，这样我就可以在不使用 ERB 代码的情况下引用它。如果上面是用erb解析的，我相信%2d会失去意义，rails很可能只会引用一个文件。

我尝试将它们放在rails中的公共目录中，但是当我尝试加载页面时仍然得到138 404。

更新：我现在使用的方法如下：

    'images':"<%=asset_path('intro_png/intro-png_')%>"+'%2d.png'

如您所见，我正在尝试将 ruby 部分与 js 部分连接起来。唯一的问题是在用它解析 js 之前，ruby 代码不是文件，所以我得到一个Sprockets::FileNotFound 错误。有没有办法绕过这个错误？

或者另一种解决方法？

编辑：

我也愿意将文件放在 PUBLIC 目录中。
我试过了

'images':'url("/intro_png/intro-png_%2d.png")'

无济于事。叹息

更新 2

该库会解析：404 看起来像这样：

http://localhost:3002/asset-url('/intro-png_134.png') 404 (Not Found)

非常感谢您的帮助，谢谢

【问题讨论】：

在您尝试过的所有方法中，第一种方法似乎是明智的。将图像放在公共目录中不会涉及资产管道，这对这种情况有好处。我希望 flibook JS 能够解析您的图像 url 并为其生成的 HTML 中的图像标签设置适当的位置。您能否检查（并告诉我们）实际发送的导致 404 的 HTTP 请求是什么？翻书 JS 是否正确处理了 %2d？（注：我对flibook插件一无所知）
您是否看到asset-url(....)，即使您在最初提出问题时仅指定'images':"/intro_png/intro-png_.%2d.png"？您是否在某处告诉 Flipbooks 插件您的后端是 Rails 并且图像是通过资产管道提供的？除此之外，我不明白为什么asset-url 应该出现在最终路径中。
如果我不包含它，我看不到asset-url，但它仍然是404s。不应该吗？我认为这是有道理的......
在您的翻书配置中指定 'images':"/intro_png/intro-png_.%2d.png"。在您的公用文件夹中创建一个名为intro_png 的目录。将您所有的图像intro-png_1.png 到intro-png_138.png 放在那个intro_png 文件夹中。现在，如果它仍然是 404，请粘贴导致 404 的 URL。在此设置中，任何地方都没有资产 URL。
是的，我就是这样。它看起来像这样：localhost:3002/intro_png/intro-png_.04.png

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

【解决方案1】：

您可以尝试： 'images':'asset-url("/intro_png/intro-png_%2d.png")'

或

image: = '<%= asset_path 'image.png' %>' 但您需要将文件重命名为 file.js.erb

如果这些答案中的任何一个有效，请尝试在此处找到解决方案：asset_pipeline

编辑：

并尝试这样的事情：http://jsfiddle.net/mLv2s/2/

【讨论】：

您好，感谢您的回答。我试过了，我仍然得到一个 404。它读出的路径是：localhost:3002/asset-url(%22/intro_png/intro-png_137.png%22) - 我不确定所有 %22 和东西的交易是什么
看不懂%22的用法
那一定来自flipbook.js？不确定，但这就是上面代码的解释方式
我刚查了一下，是因为双引号在单引号里面。如果我用单打交换双打，反之亦然。读数如下localhost:3002/asset-url('/intro_png/…404（未找到）
我解释了为什么上面的 ERB 方法不起作用。链轮错误。 %2d 实际上不是文件名，它需要由 js 库解释