How to access image with JavaScript in Ruby On Rails Project assets?

Question

I have problem accessing image file from Ruby On Rails projects app/assets/images/dir/image.jpg

It's showing nothing on image box in a browser. Locally on development environment run its shows. In my code on a local machine, I am using relative path '/assets/dir/'+image.jpg and this working locally ok.

I can open image on 'http://localhost:3000/assets/dir/ih4modxp4i4-jakob-owens.jpg' but online on production nothings showing 'http://xxx.62.xx.127/assets/dir/horuo-9ghiw-vincent-guth.jpg'

What am I doing wrong?

Can you show your actual code? The usual fix for this is that you need to create a template for the javascript file - e.g. something.js.erb. This way, the path to the image can be resolved with regards to the asset pipeline. — Tom Lord
– Tom Lord, Commented Sep 5, 2017 at 10:34
@zire Like I said, the issue is probably (?) that in production you have enabled the asset pipeline. This means your files will be fingerprinted - i.e. have random strings appended to their names. Read the documentation on how to generate links to your files. Like I said above, the trick is to generate your js file via a ruby template - i.e. write it as a .js.erb file. (Or alternatively, disable the asset pipeline!) — Tom Lord
– Tom Lord, Commented Sep 5, 2017 at 13:40
Note also that public images can also be placed (unsurprisingly) in the public/ folder. These will not be compiled, so can be referenced directly by the filename. However, images placed here will always be accessible (e.g. without logging in) - so don't misuse it. For example, you'll probably already have stuff relating to 4xx error pages in the public folder. — Tom Lord
– Tom Lord, Commented Sep 5, 2017 at 13:49

kurenn · Accepted Answer · 2017-09-05 23:58:38Z

3

The first in here is that when you deploy to something like Heroku or you run the rake assets:precompile, it will add a token to every asset on your rails app(css,js,images,fonts), it's for caching purposes

This do not happen at development, so to make it work you need to first update the name of the js file to something.js.erb and then whenever you need the path for an image, you can now embed ruby on JS, so something like:

var imagePath = "<%= asset_path('image.png') %>";

This also work for coffee script as well, just make the proper arrangements! =)

answered Sep 5, 2017 at 23:58

kurenn

1,0559 silver badges11 bronze badges

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

Comments

Hannes Schaletzky · Accepted Answer · 2021-06-02 13:38:08Z

1

If you use webpack, it will precompile the image folder in assets, so the final path of the image will be without "image". The following path
"localhost:3000/assets/images/location.png"
turns into
"localhost:3000/assets/location.png"

Maybe this will be a help :)

answered Jun 2, 2021 at 13:38

Hannes Schaletzky

4066 silver badges8 bronze badges

Comments

Francisco · Accepted Answer · 2017-09-05 23:53:32Z

0

Try going to the file config/environments/production.rb and changing this line:

 config.assets.compile = false

to this:

 config.assets.compile = true

answered Sep 5, 2017 at 23:53

Francisco

1577 bronze badges

1 Comment

ihtishaam ahmed Over a year ago

This will slow your application down.

Collectives™ on Stack Overflow

How to access image with JavaScript in Ruby On Rails Project assets?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Collectives™ on Stack Overflow

How to access image with JavaScript in Ruby On Rails Project assets?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related