rails asset-url from javascript css

Question

I have an external javascript plugin and there is a lot of code like this where the image src attribute is built dynamically.

$prod.append("<img class='fx_shadow' id='shd_" + i + "' + src='" + folderAssets + "/shadow_fx.png' />");

With rails 4.1+, I am precompiling the related images and assets that this external code provides and references above. Naturally, the images fail to load in production because using direct src attributes doesn't capture the fingerprint of the digested and precompiled image.

How do I call the asset_url method (which does output the correct asset file name with the digest) properly from an external javascript file rather than a css file? (This javascript is not a restful template js.erb file, but rather, a js file included in the manifest.)

Also, is there an elegant way to approach and refactor this?

What's the file's extension you have for your JavaScript is it .js or .js.erb? — Surya
– Surya, Commented Nov 3, 2014 at 11:19
Yes, change it to .js.erb and then: $prod.append("<img class='fx_shadow' id='shd_" + i + "' + src='<%= asset_path('shadow_fx.png') %>' />"); — Surya
– Surya, Commented Nov 3, 2014 at 11:25
I am not if this will work, but also try doing this: $prod.append("<%= image_tag 'shadow_fx.png', :class => 'fx_shadow' %>"); — Surya
– Surya, Commented Nov 3, 2014 at 11:28

Community · Accepted Answer · 2020-06-20 09:12:55Z

4

Solution 1

Add a function

function imagePath(image){
    return "http://" + window.location.host + "/assets/"+ image;
}

$prod.append("<img class='fx_shadow' id='shd_" + i + "' + src=imagePath(image) />");

Solution 2

Change the file from js to js.erb

$prod.append("<img class='fx_shadow' id='shd_" + i + "' + src='<%= asset_path('shadow_fx.png') %>' />");

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Nov 3, 2014 at 11:45

mohameddiaa27

3,5971 gold badge18 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Surya · Accepted Answer · 2014-11-03 11:48:53Z

3

Checkout 2.3.3 JavaScript/CoffeeScript and ERB. You need to change .js to .js.erb extension, for example: javascript_filename.js.erb. Then you can use it like so:

$prod.append("<img class='fx_shadow' id='shd_" + i + "' + src='<%= asset_path('shadow_fx.png') %>' />");

or:

var image = $("<%= image_tag 'shadow_fx.png', :class => 'fx_shadow' %>");
image.attr('id', 'shd_'+i);
$prod.append(image);

In second option, you have to make image_tag as image element and then add id attribute to it because i is a JavaScript variable, that's why it has to be added in a separate line.

answered Nov 3, 2014 at 11:48

Surya

16k3 gold badges55 silver badges77 bronze badges

Collectives™ on Stack Overflow

rails asset-url from javascript css

2 Answers 2

Solution 1

Solution 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Solution 1

Solution 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related