Acquire Asset Path from JavaScript

Question

I need to display images on an HTML5 canvas that are in the Rails asset pipeline, but I need to know the path for the asset from JavaScript. I'm using js-routes for other parts of the application, but it doesn't appear to provide a way to get the path to something in the asset pipeline.

What's the correct way to obtain the path to a Rails asset (e.g., an image) from JavaScript?

score 25 · Accepted Answer · answered Nov 15 '12 at 16:04

25

In the Rails Asset Pipeline guide, they give an example of coding assets in your stylesheets by preprocessing the stylesheets with ERB. You can use the same technique with JavaScript, assuming you tack an .erb to the end of the filename:

var someAssetPath = "<%= asset_path('some_image.png') %>";

answered Nov 15 '12 at 16:04

BaronVonBraun

4,285
23
23

Thank you for the quick response....I thought about doing this, but there could be many different assets I'd want the path to, so this could get cumbersome and turn into a maintenance nightmare as assets are added or removed. I also considered creating my own action method to return the URL for the provided asset name, but I was hoping to find a better alternative. – senfo Nov 15 '12 at 16:08
4

I personally think this is a terrible suggestion, even though it is viable. Rails is not intended to be a JavaScript precompiler. – arxpoetica Mar 04 '14 at 16:44
1

@ArxPoetica, then why did they embrace CoffeeScript that compiles to JavaScript? – Mischa Nov 16 '15 at 12:05

score 9 · Answer 2 · answered May 02 '14 at 17:03

Checkout the js_assets(Javascript helper in rails projects) gem. I think it is precisely what you need.

From the documentation:

Get the path to the template app/assets/javascripts/rubrics/views/index.html in javascript: var path = asset_path('rubrics/views/index.html')

score 7 · Answer 3 · answered Nov 03 '14 at 03:20

7

Why not add a data attribute for the path inside an element in your .erb file and then retrieve that with JQuery?

inside some_template.html.erb

<%= content_tag(:div, "", id: 'some-id', data:{path_to_asset: asset_path("some_image.png")}) %>

then in some_javascript.js

var assetPath = $("#some-id").data("pathToAsset");

answered Nov 03 '14 at 03:20

ryan2johnson9

724
6
21

1

i kind of like this suggestion. Instead of appending .erb to your js file. – kev Apr 12 '15 at 15:34
2

I like this too, because if you need to use a variable derived from javascript in your image path, you can't use asset path with erb injection. – Jesse Farmer Nov 20 '15 at 06:33

Michael Yagudaev · Answer 4 · 2016-02-03T07:32:35.997

6

For those using HAML you can do:

:javascript
   var assetPath = "#{asset_path('some_image.jpg')}";

edited Feb 03 '16 at 07:32

answered May 15 '14 at 23:00

Michael Yagudaev

6,049
3
48
53

1

I had to use double quotes to get it to work, but thanks for getting me on the right track. – cubsker Feb 01 '16 at 07:59

score 4 · Answer 5 · answered Oct 13 '14 at 07:39

4

I came across the same issue in Rails 4.1 and used referencing rails assets in coffeescript for images. No additional libraries needed.

answered Oct 13 '14 at 07:39

Artur Hebda

49
1
2

score 0 · Answer 6 · answered Jun 05 '20 at 14:38

In my case, I wanted to get the stylesheet path and the hash that rails generates for cache busting made it impossible to hardcode.

What ended up working quite well for me is to assign an ID to the main stylesheet link element in the html (layout) and then use javascript to extract the href. If you want the base asset path, perhaps create a generic element with the data you need as an attribute.

Rendered HTML

<link rel="stylesheet" href="mypath/main.css" type="text/css" id="main-css">

JS

$("#main-css").attr("href"); // "mypath/main.css"

Acquire Asset Path from JavaScript

6 Answers6

Linked