简体   繁体   中英

Referencing Images in JS with/out ERB Ruby on Rails

I am using 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. I'm not just referencing one file above, but many (138). Where can I put my intro_png directory with all the PNGS so I can reference it without using ERB code. 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.

I tried to put them in the public directory in rails, but I still got 138 404s when I tried to load the page.

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. The only problem is ruby code isn't a file until the js is parsed with it, so I get a Sprockets::FileNotFound error. 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.
I tried

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

To no avail. sigh

Update 2

The library does parse: the 404's look like this:

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")'

or

image: = '<%= asset_path 'image.png' %>' but you need rename your file to file.js.erb

If any of this answers work try to find the solution here: asset_pipeline

EDITING :

And trying something like this: http://jsfiddle.net/mLv2s/2/

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

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