简体   繁体   English

在有/无ERB Ruby on Rails的JS中引用图像

[英]Referencing Images in JS with/out ERB Ruby on Rails

I am using jquery.flipbook.js, https://gist.github.com/kgn/719686 我正在使用jquery.flipbook.js, https: //gist.github.com/kgn/719686

and the following code is required: 并且需要以下代码:

$('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)"
});

the %2d in the above is required to iterate to the next image in a png sequence. 需要上面的%2d迭代到png序列中的下一个图像。 I'm not just referencing one file above, but many (138). 我不仅在上面引用了一个文件,还引用了许多文件(138)。 Where can I put my intro_png directory with all the PNGS so I can reference it without using ERB code. 我在哪里可以将intro_png目录和所有PNGS放在哪里,因此无需使用ERB代码就可以引用它。 If the above is parsed in erb, I believe the %2d will lose it's meaning, and rails will most likely just reference one file. 如果以上内容用erb解析,我相信%2d将会失去它的含义,并且rails很可能只会引用一个文件。

I tried to put them in the public directory in rails, but I still got 138 404s when I tried to load the page. 我试图将它们放在rails的公共目录中,但是当我尝试加载页面时,仍然得到138404。

Update : The approach I am using now is the following: 更新 :我现在使用的方法如下:

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

As you see, I'm trying to concat the ruby part with the js part. 如您所见,我正在尝试将Ruby部分与js部分结合起来。 The only problem is ruby code isn't a file until the js is parsed with it, so I get a Sprockets::FileNotFound error. 唯一的问题是,在解析完js之前,ruby代码才是文件,因此出现了Sprockets::FileNotFound错误。 Is there anyway to bypass that error? 反正有绕过该错误?

Or another work around? 还是其他解决方法?

Edit: 编辑:

I'd also be willing to put the files in the PUBLIC directory. 我也愿意将文件放在PUBLIC目录中。
I tried 我试过了

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

To no avail. 无济于事。 sigh

Update 2 更新2

The library does parse: the 404's look like this: 该库会解析:404的外观如下:

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

I'd appreciate the help, thanks 谢谢您的帮助,谢谢

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

or 要么

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

If any of this answers work try to find the solution here: asset_pipeline 如果这些答案中的任何一个有效,请尝试在此处找到解决方案: asset_pipeline

EDITING : 编辑

And trying something like this: http://jsfiddle.net/mLv2s/2/ 并尝试这样的事情: http : //jsfiddle.net/mLv2s/2/

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM