Rails 4 Javascript: Having trouble with image paths

Question

I'm trying to get the background image to change every 6 seconds and it's always a 404 error:

For example, the below appears in the JS console

http://localhost:3000/app/assets/images/ggb_mist.png 404 (Not Found)

To simplify this I just tried a background-color to make sure it was working. See below:

$(document).ready(function() {
  function testing() {
    $('.holder').css('background-color', 'red');
  };
});

The above works. Now when I try to do the same with an image (which is located in app/assets/images/imagefilenamehere.png I always get a 404 error. I've tried:

filenamehere.png
../assets/images/filenamehere.png
../app/assets/images/filenamehere.png
../images/filenamehere.png

Why won't the below work?

$('.holder').css({'backgroundImage':'../assets/images/filenamehere.png'});

Any input on the matter is appreciated.

Jaron Gao · Accepted Answer · 2014-02-26 00:32:59Z

21

You can use the .erb (embedded ruby) extension to allow rails path helpers in your .js files:

1) You save your original file (my_script.js) as my_script.js.erb with the image path helper:

$('.holder').css({"background-image":"<%= asset_path('filenamehere.png') %>"});

Also, make sure you have your asset pipeline set up correctly:

From the Rails Asset Pipeline guide (http://guides.rubyonrails.org/asset_pipeline.html)

2) Your javascript file (my_script.js.erb) is inside:

app/assets/javascripts/
lib/assets/javascripts/
vendor/assets/javascripts/
vendor/assets/somepackage/

3) Your file is referenced in the manifest (maybe app/assets/javascripts/application.js):

//= require my_script

edited Feb 26, 2014 at 0:32

answered Feb 26, 2014 at 0:26

Jaron Gao

4663 silver badges9 bronze badges

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

2 Comments

Nubtacular Over a year ago

Thank you for the answer. the file was initially welcome.js.coffee so i commented out the coffee gem and made the file welcome.js. Now I've changed it to welcome.js.erb and applied the jQuery above. My application.js is indeed in app/assets/javascripts/ and //=require welcome in application.js doesn't change anything. No errors in js console (I can get an alert to work).

Nubtacular Over a year ago

Sweet got it: See here section 2.3.1 guides.rubyonrails.org/asset_pipeline.html . Upvote for you though as you were basically right.

Nubtacular · Accepted Answer · 2014-02-26 00:52:56Z

9

This solved my problem: Section 2.3.1 of guides.rubyonrails.org/asset_pipeline.html

$('.holder').css("background-image","url(<%= asset_path('tree-rays.jpg') %>)");

Note that tree-rays.jpg is in app/assets/images (Rails 4 Application).

answered Feb 26, 2014 at 0:52

Nubtacular

1,3972 gold badges18 silver badges41 bronze badges

2 Comments

Teemu Leisti Over a year ago

That worked for me, instead of tranquilize's answer. The key was having the url(...) around the ruby expression, and using a comma instead of a colon.

user1735921 Over a year ago

this is the best solution ever, but I think you can't use asset_path in .js file.. so what about that?

Collectives™ on Stack Overflow

Rails 4 Javascript: Having trouble with image paths

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related