URL of images in JavaScript code using Rails 3.1 asset pipeline?
Question
In CSS files, you can get the proper name of an image asset (with the fingerprint) by using:
background-image: url(image-url("rails.png"))
but how do you do the same from a JavaScript file?
2 answers
solution1
49 ACCPTED 2011-09-12 05:16:53
I see you are using the sass helper method.
In standard (non Sass) CSS you do something like this:
.class { background-image: url(<%= asset_path 'image.png' %>) }
The CSS file will need to have erb added to the extensions:
file_name.css.erb
For javascript the same rules apply:
file_name.js.erb
and in the file:
var image_path = '<%= asset_path 'image.png' %>'
The Rails asset pipeline guide is an excellent source of information about how to use these features.
solution2
2 2014-11-11 10:39:16
In Rails 4, instead of using a js.erb view I recommend that you stick to the asset pipeline, and pass the URL to it with a variable instead using gon or some other technique discussed at: Ruby on Rails - Send JavaScript variable from controller to external Javascript asset file
With gon :
app/views/layouts/application.html.erb:
<head>
<meta charset="utf-8"/>
<%= include_gon %>
app/controllers/application_controller.rb:
before_filter { gon.path = asset_path 'image.png' }
app/assets/javascripts/file.js.coffee:
alert gon.path
This method is faster because file is precompiled only once at startup, gets served by the server instead of through Rails, and on the same HTTP request as the rest of the Js.
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.