I'm using jquery.infinitescroll.js in my Rails 5.0 app. I have the script in my Vendor directory, and I'm trying to customize the JS to use a different image.
I can do it, if I set this property:
img: "/img/loading.gif",
I tried adding the image in a directory called img in the Vendor directory, but that didn't work.
I also tried setting the property to "/image/loading.gif" and the image still couldn't be found. What's the best way to handle this?
One approach is to append .erb extension to your jquery.infinitescroll.js.
And, in jquery.infinitescroll.js.erb, you can use the asset_path method:
{
/* ... */
img: '<%= asset_path('loading.gif') %>'
/* ... */
}
You must move your image to the app/assets/images folder.
Or, if you want to use it in a custom folder, add this path to the assets search path with config.assets.paths << Rails.root.join("vendor", "images") in config/application.rb.
By the way, that's the way recommended by the docs:
2.3.3 JavaScript/CoffeeScript and ERB
If you add an erb extension to a JavaScript asset, making it something such as application.js.erb, you can then use the asset_path helper in your JavaScript code:
$('#logo').attr({ src: "<%= asset_path('logo.png') %>" });This writes the path to the particular asset being referenced.
