Question

我正在使用Rails并希望实现FlipCounter。以下是文档链接 - http://bloggingsquared.com/jquery/flipcounter/。

我认为因为图像路径而无法显示。来自文档：

    Here's an example. This image is located at img/flipCounter-custom.png, each digit is 50 pixels wide and 67 pixels tall. I can use it as a flipCounter with the following code:
    $("#grunge_counter").flipCounter({imagePath:"img/flipCountercustom.png",digitHeight:67,digitWidth:50, number:244});

它在普通页面中使用默认路径（不是Rails项目）

我把js文件放在我的页面中并放入html代码。

这是包含的文件：

<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/counter.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/static_pages.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.easing.1.3.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.flipCounter.1.2.pack.js?body=1" type="text/javascript"></script>
<script src="/assets/static_pages.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>

和纯HTML：

     <div id="counter"><input type="hidden" name="counter-value" value="100" /></div>

和jQuery调用它：

            $("#counter").flipCounter();

但我需要使用类似的路径：

   $("#counter").flipCounter({imagePath:"//some path//flipCountercustom.png"});

但我没有设置它。我甚至试图在application.html.erb文件中创建img目录。

编辑：TRIED VARIANTS ：

       $("#counter").flipCounter({imagePath: <%= image_path("flipCounter-medium.png") %> );

       -------

       $("#counter").flipCounter({imagePath: "<%= image_path("flipCounter-medium.png") %>" );

       -------

       $("#counter").flipCounter({imagePath: <%= image_path("/images/flipCounter-medium.png") %> );

放置在assets / images文件夹中的图像

有人可以说明为什么会这样吗？

Answer 1

确保在文档加载时添加了

  $(function() {
    $("#counter").flipCounter({imagePath: "<%= image_path('flipCountercustom.png') %>"} );
  });

我试过，这对我有用。

如果您想直接使用网址而不是使用image_tag

 $(function() {
    $("#counter").flipCounter({imagePath: "/assets/flipCountercustom.png') %>"}           
 });

Answer 2

资产管道可能会让你感到悲痛。 image_path助手（ActionView :: Helpers :: AssetTagHelper）可以修复你，试试：

$("#counter").flipCounter({imagePath: <%= image_path("flipCountercustom.png") %>} );

如何为jquery flip Counter插件设置图像路径

2 个答案: